hotwirebits 0.1.0

data/app/components/hotwirebits/clipboard_component.html.erb

@@ -0,0 +1,26 @@
+<div class="<%= wrapper_classes %>"
+     data-controller="hw-clipboard"
+     data-hw-clipboard-text-value="<%= @text %>"
+     data-hw-clipboard-success-value="<%= @success_message %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <% if @label %>
+    <span class="text-sm text-hw-muted-foreground"><%= @label %></span>
+  <% end %>
+  <div class="inline-flex items-center gap-1 rounded-md border border-hw-border bg-hw-muted px-2.5 py-1.5">
+    <code class="text-sm text-hw-foreground max-w-[200px] truncate"><%= @text %></code>
+    <button type="button"
+            class="h-6 w-6 rounded flex items-center justify-center hover:bg-hw-accent transition-colors text-hw-muted-foreground hover:text-hw-foreground"
+            data-action="click->hw-clipboard#copy"
+      data-hw-clipboard-target="button">
+      <svg class="h-3.5 w-3.5" data-hw-clipboard-target="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+      </svg>
+      <svg class="hidden h-3.5 w-3.5 text-hw-success" data-hw-clipboard-target="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="20 6 9 17 4 12"/>
+      </svg>
+      <span class="sr-only">Copy</span>
+    </button>
+  </div>
+  <span class="hidden text-xs text-hw-success font-medium" data-hw-clipboard-target="feedback"><%= @success_message %></span>
+</div>

data/app/components/hotwirebits/clipboard_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ClipboardComponent < Base
+    def initialize(text:, label: nil, success_message: "Copied!", **attrs)
+      @text = text
+      @label = label
+      @success_message = success_message
+      @extra_attrs = attrs
+    end
+
+    def wrapper_classes
+      merge_classes(
+        "inline-flex items-center gap-2",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/close_button_component.html.erb

@@ -0,0 +1,3 @@
+<button type="button" aria-label="<%= @label %>" <%= 'disabled' if @disabled %> class="<%= button_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <svg class="<%= icon_classes %>" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+</button>

data/app/components/hotwirebits/close_button_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CloseButtonComponent < Base
+    SIZES = {
+      sm: "h-6 w-6",
+      md: "h-8 w-8",
+      lg: "h-10 w-10"
+    }.freeze
+
+    ICON_SIZES = {
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    }.freeze
+
+    def initialize(size: :md, label: "Close", disabled: false, **attrs)
+      @size = size
+      @label = label
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def button_classes
+      merge_classes(
+        "inline-flex items-center justify-center rounded-md text-hw-muted-foreground",
+        "hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+
+    def icon_classes
+      ICON_SIZES[@size] || ICON_SIZES[:md]
+    end
+  end
+end

data/app/components/hotwirebits/code_block_component.html.erb

@@ -0,0 +1,17 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between px-4 py-2 border-b border-hw-border">
+    <span class="text-xs font-medium text-hw-muted-foreground"><%= @language || 'code' %></span>
+    <% if @copyable %>
+      <button
+        type="button"
+        class="text-xs text-hw-muted-foreground hover:text-hw-foreground transition-colors"
+        data-controller="hw-clipboard"
+        data-action="click->hw-clipboard#copy"
+        data-hw-clipboard-text-value="<%= @code %>"
+        >
+        Copy
+      </button>
+    <% end %>
+  </div>
+  <pre class="overflow-x-auto p-4 text-sm"><code><%= @code %></code></pre>
+</div>

data/app/components/hotwirebits/code_block_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CodeBlockComponent < Base
+    def initialize(code:, language: nil, copyable: true, **attrs)
+      @code = code
+      @language = language
+      @copyable = copyable
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "relative rounded-lg border border-hw-border bg-hw-muted",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/code_highlight_component.html.erb

@@ -0,0 +1,6 @@
+<div class="<%= container_classes %>" data-controller="hw-code-highlight" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between px-4 py-2 border-b border-hw-border">
+    <span class="text-xs font-medium text-hw-muted-foreground"><%= @language %></span>
+  </div>
+  <pre class="overflow-x-auto p-4 text-sm leading-relaxed"><code data-hw-code-highlight-target="code" data-language="<%= @language %>"><% if @line_numbers %><% lines.each_with_index do |line, i| %><span class="block"><span class="inline-block w-8 text-right pr-4 select-none text-hw-muted-foreground"><%= i + 1 %></span><%= line %></span><% end %><% else %><%= @code %><% end %></code></pre>
+</div>

data/app/components/hotwirebits/code_highlight_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CodeHighlightComponent < Base
+    def initialize(code:, language: "text", theme: :light, line_numbers: false, **attrs)
+      @code = code
+      @language = language
+      @theme = theme
+      @line_numbers = line_numbers
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "rounded-lg border border-hw-border overflow-hidden",
+        theme_classes,
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def theme_classes
+      case @theme
+      when :dark then "bg-gray-950 text-gray-100"
+      else "bg-hw-background text-hw-foreground"
+      end
+    end
+
+    def lines
+      @code.to_s.split("\n")
+    end
+  end
+end

data/app/components/hotwirebits/code_mockup_component.html.erb

@@ -0,0 +1,13 @@
+<div class="rounded-lg border border-hw-border overflow-hidden bg-hw-foreground font-mono text-sm" <%= tag.attributes(@extra_attrs) %>>
+  <% if @with_header %>
+    <div class="flex items-center justify-between px-4 py-2.5 bg-hw-foreground/90 border-b border-zinc-800">
+      <div class="flex gap-1.5">
+        <div class="h-3 w-3 rounded-full bg-hw-destructive"></div>
+        <div class="h-3 w-3 rounded-full bg-hw-warning"></div>
+        <div class="h-3 w-3 rounded-full bg-hw-success"></div>
+      </div>
+      <span class="text-xs text-hw-muted-foreground"><%= @language %></span>
+    </div>
+  <% end %>
+  <pre class="p-4 overflow-x-auto"><code><% lines.each_with_index do |line, i| %><span class="flex"><% if @with_line_numbers %><span class="w-8 shrink-0 text-hw-muted-foreground select-none text-right pr-3"><%= i + 1 %></span><% end %><span class="text-hw-background flex-1"><%= ERB::Util.html_escape(line.chomp) %></span></span><% end %></code></pre>
+</div>

data/app/components/hotwirebits/code_mockup_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CodeMockupComponent < Base
+    LANGUAGES = %w[javascript typescript ruby python html css json bash yaml sql].freeze
+
+    def initialize(code:, language: "javascript", with_line_numbers: true, with_header: true, **attrs)
+      @code = code
+      @language = language
+      @with_line_numbers = with_line_numbers
+      @with_header = with_header
+      @extra_attrs = attrs
+    end
+
+    def lines
+      @code.to_s.lines
+    end
+  end
+end

data/app/components/hotwirebits/collapsible_component.html.erb

@@ -0,0 +1,17 @@
+<div data-controller="hw-collapsible" data-hw-collapsible-open-value="<%= @open %>" <%= tag.attributes(@extra_attrs) %>>
+  <button
+    type="button"
+    class="flex items-center gap-2 text-sm font-medium hover:text-hw-foreground/80 transition-colors"
+    data-action="click->hw-collapsible#toggle"
+    >
+    <svg class="h-4 w-4 shrink-0 transition-transform duration-200"
+         data-hw-collapsible-target="chevron"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
+    </svg>
+    <span><%= @trigger_label %></span>
+  </button>
+  <div class="<%= @open ? '' : 'hidden' %> mt-2" data-hw-collapsible-target="content">
+    <%= content %>
+  </div>
+</div>

data/app/components/hotwirebits/collapsible_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CollapsibleComponent < Base
+    def initialize(trigger_label:, open: false, **attrs)
+      @open = open
+      @trigger_label = trigger_label
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/color_input_component.html.erb

@@ -0,0 +1,19 @@
+<div class="flex items-center gap-2"
+     data-controller="hw-color-input"
+     data-hw-color-input-format-value="<%= @format %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <label class="relative flex h-9 w-9 shrink-0 cursor-pointer overflow-hidden rounded-md border border-hw-input">
+    <input type="color"
+           value="<%= @value %>"
+           class="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+           data-hw-color-input-target="picker"
+           data-action="input->hw-color-input#update">
+    <div class="h-full w-full rounded-md" data-hw-color-input-target="preview" style="background-color: <%= @value %>;"></div>
+  </label>
+  <input type="text"
+         name="<%= @name %>"
+         value="<%= @value %>"
+         class="h-9 w-28 rounded-md border border-hw-input bg-hw-background px-3 text-sm font-mono text-hw-foreground uppercase focus:outline-none focus:ring-2 focus:ring-hw-ring"
+         data-hw-color-input-target="text"
+         data-action="input->hw-color-input#updateFromText">
+</div>

data/app/components/hotwirebits/color_input_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ColorInputComponent < Base
+    FORMATS = %i[hex rgb hsl].freeze
+
+    def initialize(name:, value: "#000000", format: :hex, **attrs)
+      @name = name
+      @value = value
+      @format = FORMATS.include?(format) ? format : :hex
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/color_picker_component.html.erb

@@ -0,0 +1,6 @@
+<div class="flex items-center gap-2" data-controller="hw-color-picker">
+  <input type="color" name="<%= @name %>" value="<%= @value %>" <%= 'disabled' if @disabled %> class="h-9 w-9 cursor-pointer rounded-md border border-hw-input bg-transparent p-0.5 disabled:cursor-not-allowed disabled:opacity-50" data-action="input->hw-color-picker#update" <%= tag.attributes(@extra_attrs) %>>
+  <% if @show_input %>
+    <input type="text" value="<%= @value %>" <%= 'disabled' if @disabled %> class="h-9 w-24 rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-hw-color-picker-target="text" data-action="input->hw-color-picker#parse">
+  <% end %>
+</div>

data/app/components/hotwirebits/color_picker_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ColorPickerComponent < Base
+    def initialize(name: nil, value: "#000000", disabled: false, show_input: true, **attrs)
+      @name = name
+      @value = value
+      @disabled = disabled
+      @show_input = show_input
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def color_input
+      tag.input(
+        type: "color",
+        name: @name,
+        value: @value,
+        disabled: @disabled,
+        class: "h-9 w-9 cursor-pointer rounded-md border border-hw-input bg-transparent p-0.5 disabled:cursor-not-allowed disabled:opacity-50",
+        data: {action: "input->hw-color-picker#update"},
+        **@extra_attrs
+      )
+    end
+
+    def text_input
+      tag.input(
+        type: "text",
+        value: @value,
+        disabled: @disabled,
+        class: "h-9 w-24 rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2",
+        data: {rb_color_picker_target: "text", action: "input->hw-color-picker#parse"}
+      )
+    end
+  end
+end

data/app/components/hotwirebits/color_swatch_component.html.erb

@@ -0,0 +1 @@
+<span class="inline-block rounded-full border border-hw-border cursor-pointer <%= SIZES[@size] || 'h-7 w-7' %>" style="background-color: <%= @color %>" <%= @with_tooltip ? "title='#{@color}'" : '' %> <%= tag.attributes(@extra_attrs) %>></span>

data/app/components/hotwirebits/color_swatch_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ColorSwatchComponent < Base
+    SIZES = {
+      sm: "h-5 w-5",
+      md: "h-7 w-7",
+      lg: "h-9 w-9"
+    }.freeze
+
+    def initialize(color:, size: :md, with_tooltip: true, **attrs)
+      @color = color
+      @size = size
+      @with_tooltip = with_tooltip
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/combobox_component.html.erb

@@ -0,0 +1,15 @@
+<div class="relative" data-controller="hw-combobox">
+  <input type="hidden" name="<%= @name %>" value="<%= @selected %>" data-hw-combobox-target="hidden">
+  <input type="text" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled %> class="flex h-9 w-full rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground ring-offset-hw-background placeholder:text-hw-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="input->hw-combobox#search focus->hw-combobox#open click@window->hw-combobox#close" data-hw-combobox-target="input" role="combobox" aria-expanded="false" autocomplete="list" <%= tag.attributes(@extra_attrs) %>>
+  <div class="absolute z-50 mt-1 w-full rounded-md border border-hw-border bg-hw-popover shadow-md hidden" data-hw-combobox-target="dropdown">
+    <ul class="max-h-60 overflow-auto p-1" role="listbox">
+      <% @options.each do |opt| %>
+        <% value = opt.is_a?(Array) ? opt.last : opt %>
+        <% label = opt.is_a?(Array) ? opt.first : opt %>
+        <li class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground" role="option" data-action="click->hw-combobox#select" data-value="<%= value %>">
+          <%= label %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/components/hotwirebits/combobox_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ComboboxComponent < Base
+    def initialize(name: nil, options: [], selected: nil, placeholder: "Search...", allow_create: false,
+      disabled: false, **attrs)
+      @name = name
+      @options = options
+      @selected = selected
+      @placeholder = placeholder
+      @allow_create = allow_create
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: @selected, data: {rb_combobox_target: "hidden"})
+    end
+
+    def search_input
+      tag.input(
+        type: "text",
+        placeholder: @placeholder,
+        disabled: @disabled,
+        class: "flex h-9 w-full rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground ring-offset-hw-background placeholder:text-hw-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2",
+        data: {action: "input->hw-combobox#search focus->hw-combobox#open click@window->hw-combobox#close",
+               rb_combobox_target: "input"},
+        role: "combobox",
+        aria: {expanded: false, autocomplete: "list"},
+        **@extra_attrs
+      )
+    end
+
+    def dropdown
+      tag.div(
+        class: "absolute z-50 mt-1 w-full rounded-md border border-hw-border bg-hw-popover shadow-md hidden",
+        data: {rb_combobox_target: "dropdown"}
+      ) do
+        tag.ul(class: "max-h-60 overflow-auto p-1", role: "listbox") do
+          safe_join(@options.map do |opt|
+            value = opt.is_a?(Array) ? opt.last : opt
+            label = opt.is_a?(Array) ? opt.first : opt
+            tag.li(
+              label,
+              class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground",
+              role: "option",
+              data: {action: "click->hw-combobox#select", value: value}
+            )
+          end)
+        end
+      end
+    end
+  end
+end

data/app/components/hotwirebits/command_bar_component.html.erb

@@ -0,0 +1,33 @@
+<div class="rounded-xl border border-hw-border bg-hw-popover shadow-lg overflow-hidden"
+     data-controller="hw-command-bar"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center gap-3 px-4 border-b border-hw-border">
+    <svg class="h-4 w-4 text-hw-muted-foreground shrink-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+    </svg>
+    <input type="text"
+           placeholder="<%= @placeholder %>"
+           class="flex-1 h-11 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none"
+           data-hw-command-bar-target="input"
+           data-action="input->hw-command-bar#filter keydown->hw-command-bar#keydown">
+  </div>
+  <div class="max-h-[300px] overflow-y-auto p-2" data-hw-command-bar-target="list">
+    <% @commands.each_with_index do |cmd, idx| %>
+      <button type="button"
+              class="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-hw-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors cursor-pointer <%= idx == 0 ? 'bg-hw-accent' : '' %>"
+              data-hw-command-bar-target="item"
+              data-action="click->hw-command-bar#select"
+        data-command="<%= cmd[:action] %>">
+        <% if cmd[:icon] %>
+          <span class="h-4 w-4 shrink-0 text-hw-muted-foreground"><%= safe_svg(cmd[:icon]) %></span>
+        <% end %>
+        <span class="flex-1 text-left"><%= cmd[:label] %></span>
+        <% if cmd[:shortcut] %>
+          <kbd class="pointer-events-none h-5 select-none items-center gap-0.5 rounded border border-hw-border bg-hw-muted px-1.5 font-mono text-[10px] font-medium text-hw-muted-foreground flex">
+            <%= cmd[:shortcut] %>
+          </kbd>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/command_bar_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CommandBarComponent < Base
+    def initialize(commands: [], placeholder: "Type a command or search...", **attrs)
+      @commands = commands
+      @placeholder = placeholder
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/compare_component.html.erb

@@ -0,0 +1,21 @@
+<div class="<%= container_classes %>" data-controller="hw-compare" <%= tag.attributes(@extra_attrs) %>>
+  <div class="relative w-full" style="padding-bottom: 56.25%;">
+    <img src="<%= @after_src %>" alt="<%= @after_label %>" class="absolute inset-0 h-full w-full object-cover">
+    <div class="absolute inset-0 overflow-hidden" data-hw-compare-target="before" style="width: 50%;">
+      <img src="<%= @before_src %>" alt="<%= @before_label %>" class="absolute inset-0 h-full w-full object-cover" style="min-width: 100vw; max-width: none;">
+    </div>
+    <input type="range" min="0" max="100" value="50"
+           class="absolute inset-0 z-10 m-0 h-full w-full cursor-ew-resize opacity-0"
+           data-action="input->hw-compare#slide">
+    <div class="absolute top-1/2 z-20 h-full w-0.5 -translate-y-1/2 bg-white shadow-lg"
+         data-hw-compare-target="handle" style="left: 50%;">
+      <div class="absolute top-1/2 left-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-lg">
+        <svg class="h-5 w-5 text-hw-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"/>
+        </svg>
+      </div>
+    </div>
+    <span class="absolute bottom-3 left-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= @before_label %></span>
+    <span class="absolute bottom-3 right-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= @after_label %></span>
+  </div>
+</div>

data/app/components/hotwirebits/compare_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CompareComponent < Base
+    def initialize(before_src:, after_src:, before_label: "Before", after_label: "After", **attrs)
+      @before_src = before_src
+      @after_src = after_src
+      @before_label = before_label
+      @after_label = after_label
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("relative overflow-hidden rounded-lg select-none", @extra_attrs.delete(:class))
+    end
+  end
+end

data/app/components/hotwirebits/confirm_dialog_component.html.erb

@@ -0,0 +1,17 @@
+<div data-controller="hw-confirm-dialog" data-hw-confirm-dialog-open-value="<%= @open %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="fixed inset-0 z-50 bg-black/80 hidden" data-hw-confirm-dialog-target="overlay" data-action="click->hw-confirm-dialog#cancel"></div>
+  <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-hw-border bg-hw-background p-6 shadow-lg rounded-lg hidden" data-hw-confirm-dialog-target="panel" role="alertdialog">
+    <div class="flex flex-col space-y-1.5">
+      <h2 class="text-lg font-semibold leading-none tracking-tight"><%= @title %></h2>
+    </div>
+    <div class="text-sm text-hw-muted-foreground"><%= @message %></div>
+    <div class="flex justify-end gap-2">
+      <button type="button" class="inline-flex h-9 items-center justify-center rounded-md border border-hw-input bg-hw-background px-4 text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-dialog#cancel">
+        <%= @cancel_label %>
+      </button>
+      <button type="button" class="<%= confirm_button_classes %>" data-action="click->hw-confirm-dialog#confirm">
+        <%= @confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/confirm_dialog_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ConfirmDialogComponent < Base
+    def initialize(message:, title: "Confirm", confirm_label: "Confirm", cancel_label: "Cancel", variant: :default,
+      open: false, **attrs)
+      @title = title
+      @message = message
+      @confirm_label = confirm_label
+      @cancel_label = cancel_label
+      @variant = variant
+      @open = open
+      @extra_attrs = attrs
+    end
+
+    def confirm_button_classes
+      merge_classes(
+        "inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium ring-offset-hw-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2",
+        (@variant == :destructive) ? "bg-hw-destructive text-hw-destructive-foreground hover:bg-hw-destructive/90" : "bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90"
+      )
+    end
+  end
+end

data/app/components/hotwirebits/confirm_popup_component.html.erb

@@ -0,0 +1,16 @@
+<div class="relative inline-block" data-controller="hw-confirm-popup" <%= tag.attributes(@extra_attrs) %>>
+  <div data-action="click->hw-confirm-popup#toggle" data-hw-confirm-popup-target="trigger" class="inline-block">
+    <%= content %>
+  </div>
+  <div class="<%= popup_classes %>" data-hw-confirm-popup-target="panel">
+    <p class="mb-3 text-sm"><%= @message %></p>
+    <div class="flex justify-end gap-2">
+      <button type="button" class="inline-flex h-7 items-center justify-center rounded-md border border-hw-input bg-hw-background px-3 text-xs font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-popup#cancel">
+        <%= @cancel_label %>
+      </button>
+      <button type="button" class="inline-flex h-7 items-center justify-center rounded-md bg-hw-primary px-3 text-xs font-medium text-hw-primary-foreground ring-offset-hw-background transition-colors hover:bg-hw-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2" data-action="click->hw-confirm-popup#confirm">
+        <%= @confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/confirm_popup_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ConfirmPopupComponent < Base
+    def initialize(message:, confirm_label: "Confirm", cancel_label: "Cancel", position: :bottom, **attrs)
+      @message = message
+      @confirm_label = confirm_label
+      @cancel_label = cancel_label
+      @position = position
+      @extra_attrs = attrs
+    end
+
+    def popup_classes
+      merge_classes(
+        "absolute z-50 w-64 rounded-md border border-hw-border bg-hw-popover p-3 text-hw-popover-foreground shadow-md hidden",
+        position_classes,
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def position_classes
+      case @position
+      when :top then "bottom-full mb-2"
+      when :bottom then "top-full mt-2"
+      when :left then "right-full mr-2"
+      when :right then "left-full ml-2"
+      else "top-full mt-2"
+      end
+    end
+  end
+end