view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/timeline/timeline_component.rb.tt

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module UI
+  class TimelineComponent < ApplicationComponent
+    # Vertical timeline of dated events.
+    #
+    # Usage:
+    #   ui :timeline do |t|
+    #     t.with_item(date: "Jan 2025", title: "Project started")
+    #     t.with_item(date: "Feb 2025", title: "Milestone reached",
+    #                 description: "Foundation phase complete", variant: :success)
+    #     t.with_item(date: "Mar 2025", title: "Issue detected", variant: :destructive)
+    #   end
+
+    renders_many :items, "UI::TimelineComponent::ItemComponent"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:ol,
+        class: cn("relative border-l border-border ml-3", @extra_class),
+        **@html_attrs) do
+        safe_join(items)
+      end
+    end
+
+    class ItemComponent < ApplicationComponent
+      # variant: :default | :success | :warning | :destructive | :muted
+      VARIANTS = {
+        default: "bg-primary",
+        success: "bg-green-500",
+        warning: "bg-amber-500",
+        destructive: "bg-destructive",
+        muted: "bg-muted-foreground"
+      }.freeze
+
+      DOT_CLS = "absolute -left-1.5 mt-1.5 size-3 rounded-full ring-4 ring-background shrink-0"
+      DATE_CLS = "mb-0.5 text-xs font-normal text-muted-foreground"
+      TITLE_CLS = "text-sm font-medium text-foreground leading-snug"
+      DESC_CLS = "mt-1 text-sm text-muted-foreground"
+
+      # date:        optional date/time string shown above the title
+      # title:       event label (required)
+      # description: optional supporting text
+      # variant:     dot color — :default, :success, :warning, :destructive, :muted
+      def initialize(title:, date: nil, description: nil, variant: :default, **html_attrs)
+        @title = title
+        @date = date
+        @description = description
+        @variant = variant.to_sym
+        @extra_class = html_attrs.delete(:class)
+        @html_attrs = html_attrs
+      end
+
+      def call
+        content_tag(:li,
+          class: cn("mb-8 ml-4 last:mb-0", @extra_class),
+          **@html_attrs) do
+          concat dot
+          concat content_tag(:time, @date, class: DATE_CLS) if @date
+          concat content_tag(:p, @title, class: TITLE_CLS)
+          concat content_tag(:p, @description, class: DESC_CLS) if @description
+          concat content if content?
+        end
+      end
+
+      private
+
+      def dot
+        color = VARIANTS.fetch(@variant, VARIANTS[:default])
+        content_tag(:span, nil, class: cn(DOT_CLS, color), "aria-hidden": "true")
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/timepicker/timepicker_component.rb.tt

@@ -0,0 +1,140 @@
+# frozen_string_literal: true
+
+module UI
+  class TimepickerComponent < ApplicationComponent
+    # Time picker — trigger button opens a clock popover with hour/minute spinners.
+    #
+    # value:    "HH:MM" string or nil
+    # name:     form field name for the hidden input
+    # format:   :h24 (default) | :h12
+    # step:     minute step increment (default 1, common: 5, 15, 30)
+
+    WRAPPER  = "relative inline-block"
+    TRIGGER  = "flex h-9 w-36 cursor-pointer items-center gap-2 rounded-md border border-input " \
+               "bg-background px-3 text-sm text-foreground shadow-xs " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition " \
+               "aria-expanded:border-ring"
+    ICON_CLS = "size-4 shrink-0 text-muted-foreground"
+    POPOVER  = "absolute left-0 top-full z-50 mt-1 hidden w-max rounded-lg border border-border " \
+               "bg-popover p-3 shadow-md data-[open=true]:block"
+    SPINNER_WRAP = "flex items-center justify-center gap-1"
+    COL_CLS  = "flex flex-col items-center gap-1"
+    SPIN_BTN = "inline-flex size-7 items-center justify-center rounded-md " \
+               "text-muted-foreground hover:bg-accent hover:text-accent-foreground " \
+               "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
+    NUM_CLS  = "w-10 rounded-md border border-input bg-background px-1 py-0.5 text-center text-sm " \
+               "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+    SEP_CLS  = "text-lg font-medium text-foreground pb-1"
+
+    def initialize(value: nil, name: nil, format: :h24, step: 1, **html_attrs)
+      @value       = value
+      @name        = name
+      @format      = format.to_sym
+      @step        = step.to_i.clamp(1, 60)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(WRAPPER, @extra_class),
+        data: {
+          controller: "timepicker",
+          timepicker_format_value: @format,
+          timepicker_step_value: @step
+        },
+        **@html_attrs) do
+        concat hidden_input if @name
+        concat trigger_button
+        concat clock_popover
+      end
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name,
+        value: @value,
+        data: { timepicker_target: "hidden" })
+    end
+
+    def trigger_button
+      content_tag(:button, type: "button",
+        class: TRIGGER,
+        "aria-expanded": "false",
+        "aria-haspopup": "dialog",
+        data: {
+          timepicker_target: "trigger",
+          action: "click->timepicker#toggle"
+        }) do
+        concat clock_icon
+        concat content_tag(:span, @value || "Pick time", data: { timepicker_target: "label" })
+      end
+    end
+
+    def clock_popover
+      hour_val, min_val = (@value || "00:00").split(":").map(&:to_i)
+
+      content_tag(:div,
+        class: POPOVER,
+        role: "dialog",
+        "aria-modal": "true",
+        data: { timepicker_target: "popover" }) do
+        content_tag(:div, class: SPINNER_WRAP) do
+          concat hour_column(hour_val)
+          concat content_tag(:span, ":", class: SEP_CLS)
+          concat minute_column(min_val)
+          concat ampm_column if @format == :h12
+        end
+      end
+    end
+
+    def hour_column(val)
+      content_tag(:div, class: COL_CLS) do
+        concat spin_btn("▲", "click->timepicker#hourUp")
+        concat tag.input(type: "text", inputmode: "numeric", class: NUM_CLS,
+          value: val.to_s.rjust(2, "0"), maxlength: "2",
+          data: { timepicker_target: "hour", action: "change->timepicker#hourChanged" })
+        concat spin_btn("▼", "click->timepicker#hourDown")
+      end
+    end
+
+    def minute_column(val)
+      content_tag(:div, class: COL_CLS) do
+        concat spin_btn("▲", "click->timepicker#minuteUp")
+        concat tag.input(type: "text", inputmode: "numeric", class: NUM_CLS,
+          value: val.to_s.rjust(2, "0"), maxlength: "2",
+          data: { timepicker_target: "minute", action: "change->timepicker#minuteChanged" })
+        concat spin_btn("▼", "click->timepicker#minuteDown")
+      end
+    end
+
+    def ampm_column
+      content_tag(:div, class: COL_CLS) do
+        concat spin_btn("▲", "click->timepicker#toggleAmPm")
+        concat content_tag(:span, "AM",
+          class: "w-10 rounded-md border border-input bg-background px-1 py-0.5 text-center text-sm cursor-pointer select-none",
+          data: { timepicker_target: "ampm", action: "click->timepicker#toggleAmPm" })
+        concat spin_btn("▼", "click->timepicker#toggleAmPm")
+      end
+    end
+
+    def spin_btn(label, action)
+      content_tag(:button, label, type: "button",
+        class: SPIN_BTN, "aria-hidden": "true",
+        tabindex: "-1", data: { action: action })
+    end
+
+    def clock_icon
+      content_tag(:svg,
+        safe_join([
+          content_tag(:circle, nil, cx: "12", cy: "12", r: "10"),
+          content_tag(:polyline, nil, points: "12 6 12 12 16 14")
+        ]),
+        xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+        fill: "none", stroke: "currentColor", "stroke-width": "2",
+        "stroke-linecap": "round", "stroke-linejoin": "round",
+        class: ICON_CLS, "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/timepicker/timepicker_controller.js

@@ -0,0 +1,92 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["trigger", "popover", "label", "hidden", "hour", "minute", "ampm"]
+  static values = {
+    format: { type: String, default: "h24" },
+    step:   { type: Number, default: 1 }
+  }
+
+  connect() {
+    this.#outsideHandler = (e) => {
+      if (!this.element.contains(e.target)) this.close()
+    }
+  }
+
+  toggle() {
+    this.isOpen ? this.close() : this.open()
+  }
+
+  open() {
+    this.popoverTarget.dataset.open = "true"
+    this.triggerTarget.setAttribute("aria-expanded", "true")
+    document.addEventListener("click", this.#outsideHandler)
+    this.isOpen = true
+  }
+
+  close() {
+    this.popoverTarget.dataset.open = "false"
+    this.triggerTarget.setAttribute("aria-expanded", "false")
+    document.removeEventListener("click", this.#outsideHandler)
+    this.isOpen = false
+  }
+
+  hourUp()   { this.#stepHour(1) }
+  hourDown() { this.#stepHour(-1) }
+
+  minuteUp()   { this.#stepMinute(this.stepValue) }
+  minuteDown() { this.#stepMinute(-this.stepValue) }
+
+  toggleAmPm() {
+    if (!this.hasAmpmTarget) return
+    const current = this.ampmTarget.textContent.trim()
+    this.ampmTarget.textContent = current === "AM" ? "PM" : "AM"
+    this.#commit()
+  }
+
+  hourChanged()   { this.#clampInput(this.hourTarget, 0, this.formatValue === "h12" ? 12 : 23); this.#commit() }
+  minuteChanged() { this.#clampInput(this.minuteTarget, 0, 59); this.#commit() }
+
+  #stepHour(delta) {
+    const max = this.formatValue === "h12" ? 12 : 23
+    let val = parseInt(this.hourTarget.value || "0", 10) + delta
+    if (val > max) val = 0
+    if (val < 0)   val = max
+    this.hourTarget.value = String(val).padStart(2, "0")
+    this.#commit()
+  }
+
+  #stepMinute(delta) {
+    let val = parseInt(this.minuteTarget.value || "0", 10) + delta
+    if (val > 59) val = 0
+    if (val < 0)  val = 59
+    this.minuteTarget.value = String(val).padStart(2, "0")
+    this.#commit()
+  }
+
+  #clampInput(input, min, max) {
+    let val = parseInt(input.value || "0", 10)
+    if (isNaN(val)) val = min
+    val = Math.min(max, Math.max(min, val))
+    input.value = String(val).padStart(2, "0")
+  }
+
+  #commit() {
+    const h = this.hourTarget.value.padStart(2, "0")
+    const m = this.minuteTarget.value.padStart(2, "0")
+    const ampm = this.hasAmpmTarget ? ` ${this.ampmTarget.textContent.trim()}` : ""
+    const display = `${h}:${m}${ampm}`
+    const hidden  = `${h}:${m}`
+
+    this.labelTarget.textContent = display
+    if (this.hasHiddenTarget) this.hiddenTarget.value = hidden
+
+    this.element.dispatchEvent(new CustomEvent("timepicker:change", {
+      detail: { time: hidden },
+      bubbles: true
+    }))
+  }
+
+  #outsideHandler = null
+  isOpen = false
+}

data/lib/generators/view_primitives/add/templates/toaster/toaster_component.rb.tt

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+module UI
+  class ToasterComponent < ApplicationComponent
+    # Fixed-position toast stack (Sonner-style).
+    # Place once in the application layout; trigger toasts server-side via
+    # the renders_many slot or client-side via a `toaster:add` window event.
+    #
+    # Usage (layout):
+    #   ui :toaster do |t|
+    #     t.with_toast(message: "Profile saved", variant: :success)
+    #   end
+    #
+    # Usage (JS dispatch from any controller):
+    #   window.dispatchEvent(new CustomEvent("toaster:add", {
+    #     detail: { message: "Done!", variant: "success", duration: 3000 }
+    #   }))
+
+    POSITIONS = {
+      bottom_right: "fixed bottom-4 right-4",
+      bottom_left: "fixed bottom-4 left-4",
+      bottom_center: "fixed bottom-4 left-1/2 -translate-x-1/2",
+      top_right: "fixed top-4 right-4",
+      top_left: "fixed top-4 left-4",
+      top_center: "fixed top-4 left-1/2 -translate-x-1/2"
+    }.freeze
+
+    CONTAINER_CLS = "z-50 flex flex-col gap-2 w-80 pointer-events-none"
+
+    renders_many :toasts, "UI::ToasterComponent::ToastComponent"
+
+    # position: corner to anchor the stack (default: :bottom_right)
+    def initialize(position: :bottom_right, **html_attrs)
+      @position = position.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      pos_cls = POSITIONS.fetch(@position, POSITIONS[:bottom_right])
+      content_tag(:div,
+        class: cn(CONTAINER_CLS, pos_cls, @extra_class),
+        data: {
+          controller: "toaster",
+          action: "toaster:add@window->toaster#add"
+        },
+        **@html_attrs) do
+        safe_join(toasts)
+      end
+    end
+
+    class ToastComponent < ApplicationComponent
+      VARIANTS = {
+        default: {border: "border-border", icon: nil, icon_color: "text-foreground"},
+        success: {
+          border: "border-green-500/40",
+          icon: "M9 12l2 2 4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+          icon_color: "text-green-500"
+        },
+        warning: {
+          border: "border-amber-500/40",
+          icon: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
+          icon_color: "text-amber-500"
+        },
+        destructive: {
+          border: "border-destructive/40",
+          icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+          icon_color: "text-destructive"
+        },
+        info: {
+          border: "border-blue-500/40",
+          icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
+          icon_color: "text-blue-500"
+        }
+      }.freeze
+
+      TOAST_CLS = "pointer-events-auto flex items-start gap-3 rounded-lg border " \
+                  "bg-background px-4 py-3 shadow-lg text-foreground " \
+                  "transition-all duration-300 translate-y-2 opacity-0 " \
+                  "data-[open=true]:translate-y-0 data-[open=true]:opacity-100"
+
+      CLOSE_CLS = "ml-auto -mr-1 -mt-0.5 shrink-0 inline-flex size-6 items-center justify-center " \
+                  "rounded-md text-muted-foreground hover:text-foreground hover:bg-accent " \
+                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition"
+
+      # message:  toast body (required)
+      # title:    optional bold heading
+      # variant:  :default | :success | :warning | :destructive | :info
+      # duration: auto-dismiss in ms; 0 = no auto-dismiss (default: 4000)
+      def initialize(message:, title: nil, variant: :default, duration: 4000, **html_attrs)
+        @message = message
+        @title = title
+        @variant = variant.to_sym
+        @duration = duration.to_i
+        @extra_class = html_attrs.delete(:class)
+        @html_attrs = html_attrs
+      end
+
+      def call
+        v = VARIANTS.fetch(@variant, VARIANTS[:default])
+        content_tag(:div,
+          class: cn(TOAST_CLS, v[:border], @extra_class),
+          role: "alert",
+          "aria-live": "polite",
+          "data-open": "false",
+          data: {
+            toaster_target: "toast",
+            toaster_duration_param: @duration
+          },
+          **@html_attrs) do
+          concat icon_svg(v[:icon], v[:icon_color]) if v[:icon]
+          concat body
+          concat close_btn
+        end
+      end
+
+      private
+
+      def body
+        content_tag(:div, class: "flex-1 min-w-0") do
+          concat content_tag(:p, @title, class: "text-sm font-semibold leading-tight") if @title
+          concat content_tag(:p, @message,
+            class: "text-sm leading-snug#{" text-muted-foreground mt-0.5" if @title}")
+        end
+      end
+
+      def close_btn
+        content_tag(:button, type: "button",
+          class: CLOSE_CLS,
+          "aria-label": "Dismiss",
+          data: {action: "click->toaster#dismiss"}) do
+          content_tag(:svg,
+            content_tag(:path, nil, d: "M18 6 6 18M6 6l12 12",
+              "stroke-linecap": "round", "stroke-linejoin": "round"),
+            xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+            fill: "none", stroke: "currentColor", "stroke-width": "2",
+            class: "size-3.5", "aria-hidden": "true")
+        end
+      end
+
+      def icon_svg(path, color_cls)
+        content_tag(:svg,
+          content_tag(:path, nil, d: path,
+            "stroke-linecap": "round", "stroke-linejoin": "round"),
+          xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24",
+          fill: "none", stroke: "currentColor", "stroke-width": "2",
+          class: "mt-0.5 size-4 shrink-0 #{color_cls}",
+          "aria-hidden": "true")
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/toaster/toaster_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["toast"]
+  #timers = new Map()
+
+  connect() {
+    this.toastTargets.forEach(toast => this.#show(toast))
+  }
+
+  // Triggered by: window.dispatchEvent(new CustomEvent("toaster:add", { detail: { message, title, variant, duration } }))
+  add({ detail }) {
+    const toast = this.#buildToast(detail)
+    this.element.appendChild(toast)
+    this.#show(toast)
+  }
+
+  dismiss({ currentTarget }) {
+    this.#hide(currentTarget.closest("[data-toaster-target='toast']"))
+  }
+
+  #show(toast) {
+    requestAnimationFrame(() => {
+      toast.dataset.open = "true"
+      const duration = parseInt(toast.dataset.toasterDurationParam ?? "4000")
+      if (duration > 0) {
+        this.#timers.set(toast, setTimeout(() => this.#hide(toast), duration))
+      }
+    })
+  }
+
+  #hide(toast) {
+    if (!toast) return
+    clearTimeout(this.#timers.get(toast))
+    this.#timers.delete(toast)
+    toast.dataset.open = "false"
+    toast.addEventListener("transitionend", () => toast.remove(), { once: true })
+  }
+
+  #buildToast({ message = "", title = "", variant = "default", duration = 4000 }) {
+    const borderCls = {
+      default: "border-border",
+      success: "border-green-500/40",
+      warning: "border-amber-500/40",
+      destructive: "border-destructive/40",
+      info: "border-blue-500/40"
+    }[variant] ?? "border-border"
+
+    const div = document.createElement("div")
+    div.setAttribute("role", "alert")
+    div.setAttribute("aria-live", "polite")
+    div.dataset.open = "false"
+    div.dataset.toasterTarget = "toast"
+    div.dataset.toasterDurationParam = duration
+    div.className = [
+      "pointer-events-auto flex items-start gap-3 rounded-lg border",
+      "bg-background px-4 py-3 shadow-lg text-foreground",
+      "transition-all duration-300 translate-y-2 opacity-0",
+      "data-[open=true]:translate-y-0 data-[open=true]:opacity-100",
+      borderCls
+    ].join(" ")
+
+    const bodyHtml = title
+      ? `<p class="text-sm font-semibold leading-tight">${this.#esc(title)}</p>
+         <p class="text-sm leading-snug text-muted-foreground mt-0.5">${this.#esc(message)}</p>`
+      : `<p class="text-sm leading-snug">${this.#esc(message)}</p>`
+
+    div.innerHTML = `
+      <div class="flex-1 min-w-0">${bodyHtml}</div>
+      <button type="button" aria-label="Dismiss"
+        data-action="click->toaster#dismiss"
+        class="ml-auto -mr-1 -mt-0.5 shrink-0 inline-flex size-6 items-center justify-center
+               rounded-md text-muted-foreground hover:text-foreground hover:bg-accent
+               focus-visible:ring-[3px] focus-visible:ring-ring/50 outline-none transition">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" class="size-3.5" aria-hidden="true">
+          <path d="M18 6 6 18M6 6l12 12" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>`
+    return div
+  }
+
+  #esc(str) {
+    return String(str)
+      .replace(/&/g, "&amp;").replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+  }
+}

data/lib/generators/view_primitives/add/templates/toggle/toggle_component.rb.tt

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module UI
+  class ToggleComponent < ApplicationComponent
+    BASE = "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 dark:aria-invalid:ring-destructive/40 " \
+           "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground " \
+           "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+    SIZES = {
+      default: "h-9 min-w-9 px-2",
+      sm:      "h-8 min-w-8 px-1.5",
+      lg:      "h-10 min-w-10 px-2.5"
+    }.freeze
+
+    def initialize(label = nil, pressed: false, size: :default, value: nil, **html_attrs)
+      @label = label || html_attrs.delete(:label)
+      @pressed = pressed
+      @size = size.to_sym
+      @value = value
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:button,
+        content.presence || @label,
+        type: "button",
+        "aria-pressed": @pressed.to_s,
+        "data-state": @pressed ? "on" : "off",
+        "data-controller": "toggle",
+        "data-action": "click->toggle#toggle",
+        value: @value,
+        class: cn(BASE, SIZES.fetch(@size, SIZES[:default]), @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/toggle/toggle_controller.js

@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  toggle() {
+    // Defer to toggle-group controller when nested inside one
+    if (this.element.closest("[data-controller~='toggle-group']")) return
+
+    const on = this.element.dataset.state === "on"
+    this.element.dataset.state = on ? "off" : "on"
+    this.element.setAttribute("aria-pressed", String(!on))
+  }
+}

data/lib/generators/view_primitives/add/templates/toggle_group/toggle_group_component.rb.tt

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module UI
+  class ToggleGroupComponent < ApplicationComponent
+    BASE = "inline-flex gap-1"
+
+    # type:  :single — only one item active at a time
+    #        :multiple — multiple items can be active simultaneously
+    # value: currently active value (String) for :single,
+    #        or array of active values for :multiple
+    def initialize(type: :single, value: nil, **html_attrs)
+      @type = type.to_sym
+      @value = Array(value).map(&:to_s)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        content,
+        class: cn(BASE, @extra_class),
+        role: "group",
+        "data-controller": "toggle-group",
+        "data-toggle-group-type-value": @type,
+        **@html_attrs)
+    end
+
+    def item_pressed?(item_value)
+      @value.include?(item_value.to_s)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/toggle_group/toggle_group_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { type: { type: String, default: "single" } }
+
+  connect() {
+    this.element.addEventListener("click", this.#handleClick)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this.#handleClick)
+  }
+
+  #handleClick = (event) => {
+    const btn = event.target.closest("button")
+    if (!btn || !this.element.contains(btn)) return
+
+    const alreadyOn = btn.dataset.state === "on"
+
+    if (this.typeValue === "single") {
+      this.#buttons.forEach(b => {
+        b.dataset.state = "off"
+        b.setAttribute("aria-pressed", "false")
+      })
+      if (!alreadyOn) {
+        btn.dataset.state = "on"
+        btn.setAttribute("aria-pressed", "true")
+      }
+    } else {
+      btn.dataset.state = alreadyOn ? "off" : "on"
+      btn.setAttribute("aria-pressed", String(!alreadyOn))
+    }
+  }
+
+  get #buttons() {
+    return Array.from(this.element.querySelectorAll("button"))
+  }
+}