view_primitives 0.1.0

data/lib/generators/view_primitives/add/templates/qr_code/qr_code_component.rb.tt

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module UI
+  class QrCodeComponent < ApplicationComponent
+    # Renders a QR code image.
+    #
+    # Usage options:
+    #   1. src:   — pass a pre-rendered image URL (e.g. from an API or Rails asset)
+    #   2. Block  — pass raw SVG or HTML generated by a gem such as rqrcode:
+    #
+    #      <%= ui :qr_code, size: 200 do %>
+    #        <%= RQRCode::QRCode.new("https://example.com").as_svg(viewbox: true).html_safe %>
+    #      <% end %>
+
+    WRAPPER_CLS = "inline-flex items-center justify-center overflow-hidden rounded-lg bg-white p-3"
+
+    # src:  image URL for a pre-rendered QR (renders an <img>)
+    # alt:  accessible label for the <img> (default: "QR code")
+    # size: pixel dimensions applied to the <img> (ignored when using block content)
+    def initialize(src: nil, alt: "QR code", size: 200, **html_attrs)
+      @src  = src
+      @alt  = alt
+      @size = size
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: cn(WRAPPER_CLS, @extra_class), **@html_attrs) do
+        if @src
+          tag.img(src: @src, alt: @alt, width: @size, height: @size,
+            class: "block", loading: "lazy")
+        else
+          content
+        end
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/radio_group/radio_group_component.rb.tt

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module UI
+  class RadioGroupComponent < ApplicationComponent
+    # items: [{ value:, label:, checked: (optional) }]
+    def initialize(name:, items: [], **html_attrs)
+      @name = name
+      @items = items
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("grid gap-2", @extra_class),
+        role: "radiogroup",
+        **@html_attrs) do
+        if @items.any?
+          safe_join(@items.map { |item| radio_item(item) })
+        else
+          content
+        end
+      end
+    end
+
+    private
+
+    def radio_item(item)
+      id = "#{@name}_#{item[:value].to_s.gsub(/\W/, "_")}"
+      content_tag(:div, class: "flex items-center gap-2") do
+        concat radio_input(item, id)
+        concat radio_label(item, id)
+      end
+    end
+
+    def radio_input(item, id)
+      attrs = { type: "radio", name: @name, value: item[:value], id: id,
+                class: "h-4 w-4 border border-primary text-primary accent-primary " \
+                       "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " \
+                       "disabled:cursor-not-allowed disabled:opacity-50" }
+      attrs[:checked] = true if item[:checked]
+      content_tag(:input, nil, **attrs)
+    end
+
+    def radio_label(item, id)
+      content_tag(:label, item[:label],
+        for: id,
+        class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/range/range_component.rb.tt

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module UI
+  class RangeComponent < ApplicationComponent
+    BASE = "w-full cursor-pointer appearance-none rounded-full bg-input outline-none " \
+           "h-2 accent-primary " \
+           "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+           "disabled:pointer-events-none disabled:opacity-50 " \
+           "[&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none " \
+           "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary " \
+           "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background " \
+           "[&::-webkit-slider-thumb]:shadow-xs [&::-webkit-slider-thumb]:transition-[color,box-shadow] " \
+           "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none " \
+           "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary " \
+           "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background " \
+           "[&::-moz-range-thumb]:border-solid [&::-moz-range-thumb]:shadow-xs"
+
+    # min / max / step / value: native range attributes
+    def initialize(min: 0, max: 100, step: 1, value: nil, **html_attrs)
+      @min   = min
+      @max   = max
+      @step  = step
+      @value = value
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      attrs = {
+        type: "range",
+        min: @min,
+        max: @max,
+        step: @step,
+        class: cn(BASE, @extra_class)
+      }
+      attrs[:value] = @value unless @value.nil?
+      content_tag(:input, nil, **attrs, **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/rating/rating_component.rb.tt

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module UI
+  class RatingComponent < ApplicationComponent
+    STAR_PATH = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+
+    def initialize(value: 0, max: 5, **html_attrs)
+      @value = value.to_f.clamp(0, max)
+      @max = max
+      @filled_count = @value.round
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        stars,
+        class: cn("inline-flex gap-0.5", @extra_class),
+        role: "img",
+        "aria-label": "Rating: #{@value} out of #{@max}",
+        **@html_attrs)
+    end
+
+    private
+
+    def stars
+      @max.times.map { |i| star(i + 1 <= @filled_count) }.join.html_safe
+    end
+
+    def star(filled)
+      content_tag(:svg,
+        content_tag(:path, nil, d: STAR_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
+        class: filled ? "size-5 text-yellow-400" : "size-5 text-muted-foreground",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: filled ? "currentColor" : "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "aria-hidden": "true")
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/rating_input/rating_controller.js

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { value: Number, url: String }
+  static targets = ["star", "input"]
+
+  preview({ params: { index } }) {
+    this.#render(index)
+  }
+
+  resetPreview() {
+    this.#render(this.valueValue)
+  }
+
+  select({ params: { index } }) {
+    this.valueValue = index
+    if (this.hasInputTarget) this.inputTarget.value = index
+    if (this.urlValue) this.#submit(index)
+  }
+
+  #render(upTo) {
+    this.starTargets.forEach((star, i) => {
+      const filled = i < upTo
+      star.classList.toggle("text-yellow-400", filled)
+      star.classList.toggle("text-muted-foreground", !filled)
+      const svg = star.querySelector("svg")
+      if (svg) svg.setAttribute("fill", filled ? "currentColor" : "none")
+    })
+  }
+
+  async #submit(value) {
+    const token = document.querySelector('meta[name="csrf-token"]')?.content
+    try {
+      await fetch(this.urlValue, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "application/json",
+          ...(token && { "X-CSRF-Token": token })
+        },
+        body: JSON.stringify({ value })
+      })
+    } catch {
+      // network errors are silently ignored — host app handles them
+    }
+  }
+}

data/lib/generators/view_primitives/add/templates/rating_input/rating_input_component.rb.tt

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module UI
+  class RatingInputComponent < ApplicationComponent
+    STAR_PATH = "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+
+    # value: current rating (integer)
+    # max:   total stars (default 5)
+    # name:  hidden input name for use inside a <form>
+    # url:   endpoint for direct AJAX submission on click
+    def initialize(value: 0, max: 5, name: nil, url: nil, **html_attrs)
+      @value = value.to_i.clamp(0, max)
+      @max = max
+      @name = name
+      @url = url
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div,
+        class: cn("inline-flex items-center gap-0.5", @extra_class),
+        data: controller_data,
+        **@html_attrs) do
+        concat stars
+        concat hidden_input if @name
+      end
+    end
+
+    private
+
+    def controller_data
+      data = { controller: "rating", rating_value_value: @value }
+      data[:rating_url_value] = @url if @url
+      data
+    end
+
+    def stars
+      @max.times.map { |i| star_button(i + 1) }.join.html_safe
+    end
+
+    def star_button(index)
+      filled = index <= @value
+      content_tag(:button,
+        star_svg(filled),
+        type: "button",
+        class: cn(
+          "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+          filled ? "text-yellow-400" : "text-muted-foreground"
+        ),
+        data: {
+          rating_target: "star",
+          action: "mouseenter->rating#preview mouseleave->rating#resetPreview click->rating#select",
+          rating_index_param: index
+        },
+        "aria-label": "Rate #{index} out of #{@max}")
+    end
+
+    def star_svg(filled)
+      content_tag(:svg,
+        content_tag(:path, nil, d: STAR_PATH, "stroke-linecap": "round", "stroke-linejoin": "round"),
+        class: "size-6 pointer-events-none",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: filled ? "currentColor" : "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "aria-hidden": "true")
+    end
+
+    def hidden_input
+      content_tag(:input, nil,
+        type: "hidden",
+        name: @name,
+        value: @value,
+        data: { rating_target: "input" })
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/resizable/resizable_component.rb.tt

@@ -0,0 +1,91 @@
+# frozen_string_literal: true
+
+module UI
+  class ResizableComponent < ApplicationComponent
+    # Drag-to-resize panel layout — two panels separated by a draggable handle.
+    #
+    # Usage:
+    #   ui :resizable, direction: :horizontal do |r|
+    #     r.with_panel(min: 20, default: 30) { left_content }
+    #     r.with_panel { right_content }
+    #   end
+
+    WRAPPER_CLS = "flex overflow-hidden rounded-lg border border-border"
+
+    PANEL_CLS   = "overflow-auto"
+
+    HANDLE_CLS  = "group relative flex items-center justify-center " \
+                  "bg-border transition-colors hover:bg-ring/30 focus-visible:outline-none " \
+                  "focus-visible:ring-[3px] focus-visible:ring-ring/50 " \
+                  "data-[direction=horizontal]:w-px data-[direction=horizontal]:cursor-col-resize " \
+                  "data-[direction=vertical]:h-px data-[direction=vertical]:cursor-row-resize"
+
+    HANDLE_GRIP = "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border"
+
+    renders_many :panels, "UI::ResizableComponent::PanelComponent"
+
+    # direction: :horizontal (default) | :vertical
+    def initialize(direction: :horizontal, **html_attrs)
+      @direction   = direction.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      is_row = @direction == :horizontal
+      flex_dir = is_row ? "flex-row" : "flex-col"
+
+      content_tag(:div,
+        class: cn(WRAPPER_CLS, flex_dir, @extra_class),
+        data: {
+          controller: "resizable",
+          resizable_direction_value: @direction
+        },
+        **@html_attrs) do
+        panels.each_with_index do |panel, i|
+          concat panel
+          concat handle unless i == panels.size - 1
+        end
+      end
+    end
+
+    private
+
+    def handle
+      content_tag(:div,
+        class: HANDLE_CLS,
+        "data-direction": @direction,
+        tabindex: "0",
+        role: "separator",
+        "aria-orientation": @direction == :horizontal ? "vertical" : "horizontal",
+        data: {
+          resizable_target: "handle",
+          action: "mousedown->resizable#startDrag touchstart->resizable#startDrag"
+        }) do
+        content_tag(:div, nil, class: HANDLE_GRIP)
+      end
+    end
+
+    class PanelComponent < ApplicationComponent
+      def initialize(min: 10, max: 90, default: nil, **html_attrs)
+        @min     = min
+        @max     = max
+        @default = default
+        @html_attrs = html_attrs
+      end
+
+      def call
+        style = @default ? "flex: 0 0 #{@default}%" : "flex: 1"
+        content_tag(:div, content,
+          class: ResizableComponent::PANEL_CLS,
+          style: style,
+          data: {
+            resizable_target: "panel",
+            resizable_min_param: @min,
+            resizable_max_param: @max
+          },
+          **@html_attrs)
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/resizable/resizable_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["handle", "panel"]
+  static values = { direction: { type: String, default: "horizontal" } }
+
+  startDrag(event) {
+    event.preventDefault()
+    const isH = this.directionValue === "horizontal"
+    const handle = event.currentTarget
+    const idx = this.handleTargets.indexOf(handle)
+    const a = this.panelTargets[idx]
+    const b = this.panelTargets[idx + 1]
+    const container = this.element
+
+    const onMove = (e) => {
+      const clientPos = (e.touches ? e.touches[0] : e)[isH ? "clientX" : "clientY"]
+      const rect = container.getBoundingClientRect()
+      const total = isH ? rect.width : rect.height
+      const offset = clientPos - (isH ? rect.left : rect.top)
+      const pct = Math.min(90, Math.max(10, (offset / total) * 100))
+      a.style.flex = `0 0 ${pct}%`
+      b.style.flex = `0 0 ${100 - pct}%`
+    }
+
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove)
+      document.removeEventListener("mouseup", onUp)
+      document.removeEventListener("touchmove", onMove)
+      document.removeEventListener("touchend", onUp)
+    }
+
+    document.addEventListener("mousemove", onMove)
+    document.addEventListener("mouseup", onUp)
+    document.addEventListener("touchmove", onMove, { passive: false })
+    document.addEventListener("touchend", onUp)
+  }
+}

data/lib/generators/view_primitives/add/templates/scroll_area/scroll_area_component.rb.tt

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module UI
+  class ScrollAreaComponent < ApplicationComponent
+    # Custom-styled scrollbar container using CSS pseudo-elements.
+    # Works without a plugin in Tailwind v4 via arbitrary property syntax.
+
+    ORIENTATIONS = {
+      vertical:   "overflow-y-auto",
+      horizontal: "overflow-x-auto",
+      both:       "overflow-auto"
+    }.freeze
+
+    # Thin, themed scrollbar applied to the viewport
+    SCROLLBAR_CLS = "[scrollbar-width:thin] " \
+                    "[scrollbar-color:var(--color-border)_transparent] " \
+                    "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5 " \
+                    "[&::-webkit-scrollbar-track]:bg-transparent " \
+                    "[&::-webkit-scrollbar-thumb]:rounded-full " \
+                    "[&::-webkit-scrollbar-thumb]:bg-border"
+
+    # orientation: :vertical (default) | :horizontal | :both
+    # max_h:       Tailwind max-height class, e.g. "max-h-72" (vertical / both)
+    # max_w:       Tailwind max-width class, e.g. "max-w-sm" (horizontal / both)
+    def initialize(orientation: :vertical, max_h: "max-h-72", max_w: nil, **html_attrs)
+      @orientation = orientation.to_sym
+      @max_h = max_h
+      @max_w = max_w
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      overflow = ORIENTATIONS.fetch(@orientation, ORIENTATIONS[:vertical])
+      content_tag(:div,
+        content,
+        class: cn(overflow, SCROLLBAR_CLS, @max_h, @max_w, @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/search_input/search_input_component.rb.tt

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module UI
+  class SearchInputComponent < ApplicationComponent
+    WRAPPER = "relative w-full"
+    ICON_WRAP = "pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground"
+    SEARCH_PATH = "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+    INPUT_BASE = "h-9 w-full min-w-0 rounded-md border border-input bg-transparent py-1 pl-9 pr-3 text-base shadow-xs " \
+                 "transition-[color,box-shadow] outline-none " \
+                 "placeholder:text-muted-foreground " \
+                 "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 " \
+                 "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 " \
+                 "md:text-sm dark:bg-input/30"
+
+    # placeholder: default "Search…"
+    # name / id / value: passed through as html_attrs
+    def initialize(placeholder: "Search…", **html_attrs)
+      @placeholder = placeholder
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, class: WRAPPER) do
+        concat icon_span
+        concat content_tag(:input, nil,
+          type: "search",
+          placeholder: @placeholder,
+          class: cn(INPUT_BASE, @extra_class),
+          **@html_attrs)
+      end
+    end
+
+    private
+
+    def icon_span
+      svg = content_tag(:svg,
+        content_tag(:path, nil, d: SEARCH_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": "1.5",
+        class: "size-4",
+        "aria-hidden": "true")
+      content_tag(:span, svg, class: ICON_WRAP)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/select/select_component.rb.tt

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module UI
+  class SelectComponent < ApplicationComponent
+    BASE = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm " \
+           "focus:outline-none focus:ring-1 focus:ring-ring " \
+           "disabled:cursor-not-allowed disabled:opacity-50"
+
+    # options: array of strings, or [value, label] pairs, or { value: label } hash
+    def initialize(options: [], selected: nil, include_blank: false, **html_attrs)
+      @options = options
+      @selected = selected
+      @include_blank = include_blank
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:select, class: cn(BASE, @extra_class), **@html_attrs) do
+        safe_join(option_tags)
+      end
+    end
+
+    private
+
+    def option_tags
+      tags = []
+      tags << content_tag(:option, "", value: "") if @include_blank
+      normalized_options.each do |(val, label)|
+        attrs = { value: val }
+        attrs[:selected] = true if val.to_s == @selected.to_s
+        tags << content_tag(:option, label, **attrs)
+      end
+      tags
+    end
+
+    def normalized_options
+      case @options
+      when Hash  then @options.map { |v, l| [v, l] }
+      when Array then @options.map { |o| o.is_a?(Array) ? o : [o, o] }
+      else []
+      end
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/separator/separator_component.rb.tt

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module UI
+  class SeparatorComponent < ApplicationComponent
+    ORIENTATIONS = {
+      horizontal: "bg-border h-px w-full shrink-0",
+      vertical: "bg-border h-full w-px shrink-0"
+    }.freeze
+
+    def initialize(orientation: :horizontal, decorative: true, **html_attrs)
+      @orientation = orientation.to_sym
+      @decorative = decorative
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs = html_attrs
+    end
+
+    def call
+      content_tag(:div, nil,
+        role: (@decorative ? "none" : "separator"),
+        "aria-orientation": @orientation.to_s,
+        class: cn(ORIENTATIONS[@orientation], @extra_class),
+        **@html_attrs)
+    end
+  end
+end

data/lib/generators/view_primitives/add/templates/sheet/sheet_component.rb.tt

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module UI
+  class SheetComponent < ApplicationComponent
+    renders_one :trigger
+    renders_one :footer
+
+    OVERLAY = "fixed inset-0 z-50 bg-black/50"
+
+    SIDES = {
+      right:  "fixed inset-y-0 right-0 h-full w-3/4 max-w-sm border-l",
+      left:   "fixed inset-y-0 left-0 h-full w-3/4 max-w-sm border-r",
+      top:    "fixed inset-x-0 top-0 h-auto max-h-[60vh] border-b",
+      bottom: "fixed inset-x-0 bottom-0 h-auto max-h-[60vh] border-t"
+    }.freeze
+
+    def initialize(title: nil, description: nil, side: :right, **html_attrs)
+      @title       = title
+      @description = description
+      @side        = side.to_sym
+      @extra_class = html_attrs.delete(:class)
+      @html_attrs  = html_attrs
+    end
+
+    def call
+      content_tag(:div, data: { controller: "sheet" }, **@html_attrs) do
+        concat content_tag(:span, trigger, data: { action: "click->sheet#open" }, class: "contents") if trigger
+        concat panel
+      end
+    end
+
+    private
+
+    def panel
+      content_tag(:div, data: { sheet_target: "panel" }, hidden: true) do
+        concat content_tag(:div, nil,
+          class: OVERLAY,
+          data: { action: "click->sheet#close" },
+          "aria-hidden": "true")
+        concat content_tag(:div,
+          class: cn("z-50 bg-background p-6 shadow-xl overflow-y-auto",
+                    SIDES.fetch(@side, SIDES[:right]),
+                    @extra_class),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": @title,
+          data: { action: "keydown.escape@window->sheet#close" }) {
+          concat close_button
+          concat header_area
+          concat content_tag(:div, content, class: "flex-1 text-sm")
+          concat content_tag(:div, footer, class: "mt-6 flex justify-end gap-2") if footer
+        }
+      end
+    end
+
+    def header_area
+      return "" if @title.nil? && @description.nil?
+
+      content_tag(:div, class: "mb-4 pr-6") do
+        concat content_tag(:h2, @title, class: "text-lg font-semibold leading-none tracking-tight") if @title
+        concat content_tag(:p, @description, class: "mt-2 text-sm text-muted-foreground") if @description
+      end
+    end
+
+    def close_button
+      content_tag(:button,
+        close_svg,
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm p-1 opacity-70 hover:opacity-100 transition-opacity",
+        data: { action: "click->sheet#close" },
+        "aria-label": "Close")
+    end
+
+    def close_svg
+      raw('<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" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>')
+    end
+  end
+end