view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/audio/audio_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module UI
+  class AudioComponent < ApplicationComponent
+    # Add <source> elements via a.with_source(src:, type:)
+    renders_many :sources, "UI::AudioComponent::SourceComponent"
+
+    # controls:    show native browser controls (default: true)
+    # autoplay:    start playing automatically — requires muted: true in some browsers
+    # muted:       mute the audio track
+    # loop:        loop playback
+    # preload:     :auto | :metadata (default) | :none
+    def initialize(controls: true, autoplay: false, muted: false,
+                   loop: false, preload: :metadata, **html_attrs)
+      @controls = controls
+      @autoplay = autoplay
+      @muted    = muted
+      @loop     = loop
+      @preload  = preload
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = { preload: @preload, class: @extra_class }
+      attrs[:controls] = true if @controls
+      attrs[:autoplay] = true if @autoplay
+      attrs[:muted]    = true if @muted
+      attrs[:loop]     = true if @loop
+
+      content_tag(:audio, **attrs, **@html_attrs) do
+        sources.each { |s| concat s }
+        concat content if content?
+      end
+    end
+
+    # Represents a <source> element inside <audio>.
+    # a.with_source(src: "audio.mp3", type: "audio/mpeg")
+    class SourceComponent < ApplicationComponent
+      def initialize(src:, type:, **html_attrs)
+        @src  = src
+        @type = type
+        @html_attrs = html_attrs
+      end
+
+      def call
+        tag.source(src: @src, type: @type, **@html_attrs)
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/avatar/avatar_component.rb.tt

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module UI
+  class AvatarComponent < ApplicationComponent
+    SIZES = { sm: "size-6", default: "size-8", lg: "size-12" }.freeze
+    BASE = "relative flex shrink-0 overflow-hidden rounded-full select-none"
+    IMAGE = "aspect-square size-full object-cover"
+    FALLBACK = "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground"
+
+    def initialize(src: nil, alt: "", fallback: nil, size: :default, **html_attrs)
+      @src = src
+      @alt = alt
+      @fallback = fallback
+      @size = size.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn(BASE, SIZES[@size], @extra_class), **@html_attrs) do
+        if @src
+          content_tag(:img, nil, src: @src, alt: @alt, class: IMAGE)
+        else
+          content_tag(:span, initials(@fallback || @alt), class: FALLBACK)
+        end
+      end
+    end
+
+    private
+
+    def initials(text)
+      return "" if text.nil? || text.strip.empty?
+
+      text.split.first(2).map { |word| word[0] }.join.upcase
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/badge/badge_component.rb.tt

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module UI
+  class BadgeComponent < ApplicationComponent
+    BASE = "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full " \
+           "border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap " \
+           "transition-[color,box-shadow] " \
+           "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 " \
+           "[&>svg]:pointer-events-none [&>svg]:size-3"
+
+    VARIANTS = {
+      default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+      destructive: "bg-destructive text-white focus-visible:ring-destructive/20 " \
+                   "dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+      outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 [a&]:hover:underline"
+    }.freeze
+
+    def initialize(label = nil, variant: :default, **html_attrs)
+      @label = label || html_attrs.delete(:label)
+      @variant = variant.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:span, content.presence || @label,
+        class: cn(BASE, VARIANTS.fetch(@variant, VARIANTS[:default]), @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/banner/banner_component.rb.tt

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module UI
+  class BannerComponent < ApplicationComponent
+    BASE = "flex items-center gap-3 rounded-lg border p-4 text-sm"
+
+    VARIANTS = {
+      default:     "bg-background text-foreground",
+      info:        "border-blue-200 bg-blue-50 text-blue-900",
+      warning:     "border-yellow-200 bg-yellow-50 text-yellow-900",
+      destructive: "border-destructive/40 bg-destructive/10 text-destructive",
+      success:     "border-green-200 bg-green-50 text-green-900"
+    }.freeze
+
+    def initialize(message = nil, variant: :default, **html_attrs)
+      @message = message || html_attrs.delete(:message) || html_attrs.delete(:label)
+      @variant = variant.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        content.presence || @message,
+        class: cn(BASE, VARIANTS.fetch(@variant, VARIANTS[:default]), @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/bottom_nav/bottom_nav_component.rb.tt

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module UI
+  class BottomNavComponent < ApplicationComponent
+    BASE = "fixed bottom-0 left-0 z-50 w-full border-t bg-background"
+
+    # items: [{ label:, href:, active: (optional), icon: (optional HTML string) }]
+    def initialize(items: [], **html_attrs)
+      @items = items
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:nav, class: cn(BASE, @extra_class), **@html_attrs) do
+        content_tag(:div, class: "mx-auto flex h-16 max-w-lg items-center justify-around") do
+          safe_join(@items.map { |item| nav_item(item) })
+        end
+      end
+    end
+
+    private
+
+    def nav_item(item)
+      active = item[:active]
+      content_tag(:a,
+        href: item[:href],
+        class: cn(
+          "flex flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium transition-colors",
+          active ? "text-primary" : "text-muted-foreground hover:text-foreground"
+        ),
+        "aria-current": (active ? "page" : nil)) do
+        concat raw(item[:icon]) if item[:icon]
+        concat content_tag(:span, item[:label])
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/breadcrumb/breadcrumb_component.rb.tt

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module UI
+  class BreadcrumbComponent < ApplicationComponent
+    LINK  = "text-muted-foreground hover:text-foreground transition-colors"
+    CURRENT = "text-foreground font-medium"
+
+    # items: [{ label:, href: }, ..., { label: }]  — last item is the current page (no href)
+    def initialize(items: [], separator: "/", **html_attrs)
+      @items = items
+      @separator = separator
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:nav, "aria-label": "Breadcrumb", **@html_attrs) do
+        content_tag(:ol, class: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5", @extra_class)) do
+          safe_join(@items.each_with_index.map { |item, i| crumb(item, i == @items.size - 1) })
+        end
+      end
+    end
+
+    private
+
+    def crumb(item, is_last)
+      content_tag(:li, class: "inline-flex items-center gap-1.5") do
+        if is_last
+          content_tag(:span, item[:label], class: CURRENT, "aria-current": "page")
+        else
+          concat content_tag(:a, item[:label], href: item[:href], class: LINK)
+          concat content_tag(:span, @separator, class: "text-muted-foreground select-none", "aria-hidden": "true")
+        end
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/button/button_component.rb.tt

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module UI
+  class ButtonComponent < ApplicationComponent
+    BASE_CLASSES = "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm " \
+                   "font-medium transition-all outline-none " \
+                   "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 " \
+                   "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+    VARIANTS = {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 " \
+                   "focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+      outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground " \
+               "dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    }.freeze
+
+    SIZES = {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+      sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }.freeze
+
+    # label — positional or keyword shorthand for plain-text buttons without a block.
+    # href  — renders an <a> tag; sets tag: :a automatically.
+    def initialize(label = nil, variant: :default, size: :default, href: nil, **html_attrs)
+      @label = label || html_attrs.delete(:label)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @tag = html_attrs.delete(:tag)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+
+      if href
+        @html_attrs[:href] = href
+        @tag ||= :a
+      end
+    end
+
+    def call
+      body = content.presence || @label
+      tag = @tag || :button
+      attrs = @html_attrs.merge(class: component_classes)
+      attrs[:type] ||= "button" if tag == :button && !attrs.key?(:type)
+      content_tag(tag, body, **attrs)
+    end
+
+    private
+
+    def component_classes
+      cn(BASE_CLASSES, VARIANTS.fetch(@variant, VARIANTS[:default]), SIZES.fetch(@size, SIZES[:default]), @extra_class)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/button_group/button_group_component.rb.tt

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module UI
+  class ButtonGroupComponent < ApplicationComponent
+    BASE = "inline-flex rounded-md shadow-sm " \
+           "[&>*]:rounded-none " \
+           "[&>*:first-child]:rounded-l-md " \
+           "[&>*:last-child]:rounded-r-md " \
+           "[&>*:not(:first-child)]:-ml-px"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, content,
+        class: cn(BASE, @extra_class),
+        role: "group",
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/calendar/calendar_component.rb.tt

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+module UI
+  class CalendarComponent < ApplicationComponent
+    # Month-grid calendar. Renders a full month; selected/today dates are highlighted.
+    #
+    # selected:   Date or nil — highlighted day
+    # month:      Date — controls which month is shown (defaults to today)
+    # name:       form field name for the hidden input (if used in a form)
+    # min/max:    Date bounds for disabled days
+
+    CONTAINER  = "w-fit rounded-lg border border-border bg-popover p-4 text-sm shadow"
+    HEADER_CLS = "mb-3 flex items-center justify-between"
+    MONTH_CLS  = "font-medium text-foreground"
+    NAV_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"
+    GRID_CLS   = "grid grid-cols-7 gap-px"
+    DOW_CLS    = "py-1.5 text-center text-xs text-muted-foreground font-medium"
+    DAY_BASE   = "h-9 w-9 rounded-md text-center text-sm transition-colors outline-none " \
+                 "focus-visible:ring-[3px] focus-visible:ring-ring/50"
+    DAY_NORMAL = "hover:bg-accent hover:text-accent-foreground"
+    DAY_TODAY  = "font-semibold text-foreground ring-1 ring-border"
+    DAY_SEL    = "bg-primary text-primary-foreground hover:bg-primary/90"
+    DAY_MUTED  = "text-muted-foreground/50"
+    DAY_DISABLED = "pointer-events-none opacity-30"
+
+    DAYS_OF_WEEK = %w[Su Mo Tu We Th Fr Sa].freeze
+    CHEVRON_L    = "m15 18-6-6 6-6"
+    CHEVRON_R    = "m9 18 6-6-6-6"
+
+    def initialize(selected: nil, month: nil, name: nil, min: nil, max: nil, **html_attrs)
+      @selected = selected
+      @month    = (month || Date.today).beginning_of_month
+      @name     = name
+      @min      = min
+      @max      = max
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn(CONTAINER, @extra_class),
+        data: { controller: "calendar", calendar_month_value: @month.iso8601 },
+        **@html_attrs) do
+        concat hidden_input if @name && @selected
+        concat header_row
+        concat day_of_week_row
+        concat day_grid
+      end
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: @selected&.iso8601)
+    end
+
+    def header_row
+      content_tag(:div, class: HEADER_CLS) do
+        concat nav_btn(CHEVRON_L, "Previous month", "click->calendar#prevMonth")
+        concat content_tag(:span, @month.strftime("%B %Y"), class: MONTH_CLS,
+          data: { calendar_target: "monthLabel" })
+        concat nav_btn(CHEVRON_R, "Next month", "click->calendar#nextMonth")
+      end
+    end
+
+    def nav_btn(path, label, action)
+      content_tag(:button, type: "button", class: NAV_BTN,
+        "aria-label": label, data: { action: action }) { chevron(path) }
+    end
+
+    def day_of_week_row
+      content_tag(:div, class: GRID_CLS) do
+        safe_join(DAYS_OF_WEEK.map { |d| content_tag(:div, d, class: DOW_CLS) })
+      end
+    end
+
+    def day_grid
+      today = Date.today
+      first = @month.beginning_of_month
+      start = first - first.wday
+      days  = (start..(start + 41)).to_a
+
+      content_tag(:div, class: GRID_CLS, data: { calendar_target: "grid" }) do
+        safe_join(days.map { |d| day_cell(d, today, first) })
+      end
+    end
+
+    def day_cell(date, today, first)
+      outside  = date.month != first.month
+      selected = @selected && date == @selected
+      is_today = date == today
+      disabled = (@min && date < @min) || (@max && date > @max)
+
+      classes = cn(DAY_BASE,
+        selected  ? DAY_SEL    : DAY_NORMAL,
+        is_today  ? DAY_TODAY  : nil,
+        outside   ? DAY_MUTED  : nil,
+        disabled  ? DAY_DISABLED : nil)
+
+      content_tag(:button,
+        date.day.to_s,
+        type: "button",
+        class: classes,
+        "aria-label": date.strftime("%B %-d, %Y"),
+        "aria-pressed": selected.to_s,
+        disabled: disabled || nil,
+        data: { action: "click->calendar#selectDay", calendar_date_param: date.iso8601 })
+    end
+
+    def chevron(path)
+      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: "size-4", "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/calendar/calendar_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["monthLabel", "grid"]
+  static values = { month: String }
+
+  selectDay({ params: { date } }) {
+    const selected = date
+    this.element.dataset.selected = selected
+
+    this.gridTarget.querySelectorAll("button[data-calendar-date-param]").forEach(btn => {
+      const isSelected = btn.dataset.calendarDateParam === selected
+      btn.dataset.state = isSelected ? "on" : "off"
+      btn.setAttribute("aria-pressed", String(isSelected))
+    })
+
+    const hidden = this.element.querySelector("input[type=hidden]")
+    if (hidden) hidden.value = selected
+
+    this.element.dispatchEvent(new CustomEvent("calendar:change", {
+      detail: { date: selected },
+      bubbles: true
+    }))
+  }
+
+  prevMonth() {
+    this.#shiftMonth(-1)
+  }
+
+  nextMonth() {
+    this.#shiftMonth(1)
+  }
+
+  #shiftMonth(delta) {
+    const [year, month] = this.monthValue.split("-").map(Number)
+    const d = new Date(year, month - 1 + delta, 1)
+    this.monthValue = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-01`
+  }
+
+  monthValueChanged(value) {
+    if (!value) return
+    const [year, month] = value.split("-").map(Number)
+    const date = new Date(year, month - 1, 1)
+
+    this.monthLabelTarget.textContent = date.toLocaleString("default", {
+      month: "long",
+      year: "numeric"
+    })
+
+    this.#rebuildGrid(year, month)
+  }
+
+  #rebuildGrid(year, month) {
+    const selected = this.element.dataset.selected || null
+    const today = new Date()
+    const todayIso = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`
+
+    const first = new Date(year, month - 1, 1)
+    const last = new Date(year, month, 0)
+    const startOffset = first.getDay()
+    const totalCells = 42
+
+    const buttons = this.gridTarget.querySelectorAll("button[data-calendar-date-param]")
+    const start = new Date(first)
+    start.setDate(start.getDate() - startOffset)
+
+    buttons.forEach((btn, i) => {
+      const d = new Date(start)
+      d.setDate(d.getDate() + i)
+      const iso = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
+
+      btn.dataset.calendarDateParam = iso
+      btn.setAttribute("aria-label", d.toLocaleDateString("default", { month: "long", day: "numeric", year: "numeric" }))
+      btn.textContent = String(d.getDate())
+
+      const isSelected = iso === selected
+      const isToday = iso === todayIso
+      const isOutside = d.getMonth() + 1 !== month
+
+      btn.dataset.state = isSelected ? "on" : "off"
+      btn.setAttribute("aria-pressed", String(isSelected))
+      btn.dataset.today = String(isToday)
+      btn.dataset.outside = String(isOutside)
+    })
+  }
+}

data/lib/generators/view_primitives/add/templates/card/card_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class CardComponent < ApplicationComponent
+    BASE = "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, content, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/card/card_content_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class CardContentComponent < ApplicationComponent
+    BASE = "px-6"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, content, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/card/card_description_component.rb.tt

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module UI
+  class CardDescriptionComponent < ApplicationComponent
+    BASE = "text-muted-foreground text-sm"
+
+    def initialize(text = nil, **html_attrs)
+      @text = text || html_attrs.delete(:label) || html_attrs.delete(:text)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:p, content.presence || @text, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/card/card_footer_component.rb.tt

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module UI
+  class CardFooterComponent < ApplicationComponent
+    BASE = "flex items-center px-6"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, content, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/card/card_header_component.rb.tt

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module UI
+  class CardHeaderComponent < ApplicationComponent
+    BASE = "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 " \
+           "has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+
+    def initialize(**html_attrs)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, content, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/card/card_title_component.rb.tt

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module UI
+  class CardTitleComponent < ApplicationComponent
+    BASE = "leading-none font-semibold"
+
+    def initialize(title = nil, **html_attrs)
+      @title = title || html_attrs.delete(:label) || html_attrs.delete(:title)
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:h3, content.presence || @title, class: cn(BASE, @extra_class), **@html_attrs)
+    end
+  end
+end