hotwirebits 0.1.0

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

@@ -0,0 +1,14 @@
+<div class="inline-flex items-center rounded-md border border-hw-input" data-controller="hw-input-number" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button" <%= 'disabled' if @disabled %> class="<%= merge_classes('inline-flex items-center justify-center text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors disabled:pointer-events-none disabled:opacity-50', BUTTON_SIZES[@size] || 'h-9 w-9') %>" data-action="click->hw-input-number#decrement">
+    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div class="relative flex items-center">
+    <% if @currency %>
+      <span class="absolute left-2 text-xs text-hw-muted-foreground pointer-events-none"><%= @currency %></span>
+    <% end %>
+    <input type="number" name="<%= @name %>" value="<%= @value %>" min="<%= @min %>" max="<%= @max %>" step="<%= @step %>" <%= 'disabled' if @disabled %> class="<%= merge_classes('w-16 bg-transparent text-center text-hw-foreground outline-none border-x border-hw-input disabled:cursor-not-allowed disabled:opacity-50 appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', @currency ? 'pl-7' : '', SIZES[@size] || 'h-9 text-sm') %>" data-hw-input-number-target="input">
+  </div>
+  <button type="button" <%= 'disabled' if @disabled %> class="<%= merge_classes('inline-flex items-center justify-center text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors disabled:pointer-events-none disabled:opacity-50', BUTTON_SIZES[@size] || 'h-9 w-9') %>" data-action="click->hw-input-number#increment">
+    <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/></svg>
+  </button>
+</div>

data/app/components/hotwirebits/input_number_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InputNumberComponent < Base
+    SIZES = {
+      sm: "h-8 text-xs",
+      md: "h-9 text-sm",
+      lg: "h-10 text-base"
+    }.freeze
+
+    BUTTON_SIZES = {
+      sm: "h-8 w-8",
+      md: "h-9 w-9",
+      lg: "h-10 w-10"
+    }.freeze
+
+    def initialize(name: nil, value: 0, min: nil, max: nil, step: 1, currency: nil, size: :md, disabled: false, **attrs)
+      @name = name
+      @value = value
+      @min = min
+      @max = max
+      @step = step
+      @currency = currency
+      @size = size
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_element
+      tag.div(class: "relative flex items-center") do
+        safe_join([
+          (if @currency
+             tag.span(@currency,
+               class: "absolute left-2 text-xs text-hw-muted-foreground pointer-events-none")
+           end),
+          tag.input(
+            type: "number",
+            name: @name,
+            value: @value,
+            min: @min,
+            max: @max,
+            step: @step,
+            disabled: @disabled,
+            class: merge_classes(
+              "w-16 bg-transparent text-center text-hw-foreground outline-none",
+              "border-x border-hw-input",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              "appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+              @currency ? "pl-7" : "",
+              SIZES[@size] || SIZES[:md]
+            ),
+            data: {rb_input_number_target: "input"}
+          )
+        ])
+      end
+    end
+
+    def button_element(action)
+      icon_path = (action == :increment) ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"
+      tag.button(
+        type: "button",
+        disabled: @disabled,
+        class: merge_classes(
+          "inline-flex items-center justify-center text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors",
+          "disabled:pointer-events-none disabled:opacity-50",
+          BUTTON_SIZES[@size] || BUTTON_SIZES[:md]
+        ),
+        data: {action: "click->hw-input-number##{action}"}
+      ) do
+        tag.svg(class: "h-4 w-4", fill: "none", stroke: "currentColor", stroke_width: "2", viewBox: "0 0 24 24") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: icon_path)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<div class="flex items-center gap-2" data-controller="hw-otp">
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-otp-target="hidden">
+  <% @length.times do |i| %>
+    <input type="text" maxlength="1" inputmode="<%= @numeric_only ? 'numeric' : 'text' %>" <%= 'disabled' if @disabled %> value="<%= @value[i] %>" class="h-10 w-10 text-center text-lg font-semibold rounded-md border border-hw-input bg-hw-background 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 disabled:cursor-not-allowed disabled:opacity-50" data-action="input->hw-otp#input keydown->hw-otp#keydown" data-index="<%= i %>" <%= tag.attributes(@extra_attrs) %>>
+  <% end %>
+</div>

data/app/components/hotwirebits/input_otp_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InputOtpComponent < Base
+    def initialize(name: nil, length: 6, value: nil, disabled: false, numeric_only: true, **attrs)
+      @name = name
+      @length = length
+      @value = value.to_s
+      @disabled = disabled
+      @numeric_only = numeric_only
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: @value, data: {rb_otp_target: "hidden"})
+    end
+
+    def input_classes
+      merge_classes(
+        "h-10 w-10 text-center text-lg font-semibold rounded-md border border-hw-input bg-hw-background",
+        "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",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<div class="flex flex-wrap gap-1.5 rounded-md border border-hw-input bg-hw-background p-1.5 ring-offset-hw-background focus-within:ring-2 focus-within:ring-hw-ring focus-within:ring-offset-2" data-controller="hw-tags">
+  <% @value.each do |v| %>
+    <span class="inline-flex items-center gap-1 rounded-sm bg-hw-secondary px-1.5 py-0.5 text-xs text-hw-secondary-foreground">
+      <span><%= v %></span>
+      <button type="button" class="text-hw-muted-foreground hover:text-hw-foreground" data-action="click->hw-tags#remove" data-value="<%= v %>">
+        <svg class="h-3 w-3" 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>
+    </span>
+    <input type="hidden" name="<%= @name %>[]" value="<%= v %>">
+  <% end %>
+  <input type="text" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled || (@max && @value.size >= @max) %> class="flex-1 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground outline-none min-w-[80px]" data-action="keydown->hw-tags#keydown" data-hw-tags-target="input" <%= tag.attributes(@extra_attrs) %>>
+</div>

data/app/components/hotwirebits/input_tags_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InputTagsComponent < Base
+    def initialize(name: nil, value: [], placeholder: "Add tag...", disabled: false, max: nil, **attrs)
+      @name = name
+      @value = value || []
+      @placeholder = placeholder
+      @disabled = disabled
+      @max = max
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def chip(value)
+      tag.span(class: "inline-flex items-center gap-1 rounded-sm bg-hw-secondary px-1.5 py-0.5 text-xs text-hw-secondary-foreground") do
+        safe_join([
+          tag.span(value),
+          tag.button(type: "button", class: "text-hw-muted-foreground hover:text-hw-foreground",
+            data: {action: "click->hw-tags#remove", value: value}) do
+            tag.svg(class: "h-3 w-3", fill: "none", stroke: "currentColor", stroke_width: "2",
+              viewBox: "0 0 24 24") do
+              tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M6 18L18 6M6 6l12 12")
+            end
+          end
+        ])
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= join_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</div>

data/app/components/hotwirebits/join_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class JoinComponent < Base
+    def initialize(direction: :horizontal, **attrs)
+      @direction = direction
+      @extra_attrs = attrs
+    end
+
+    def join_classes
+      merge_classes(
+        "join",
+        (@direction == :vertical) ? "join-vertical" : "join-horizontal",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div data-controller="hw-json-input" data-hw-json-input-validate-value="<%= @validate %>" class="space-y-2">
+  <textarea
+    name="<%= @name %>"
+    rows="<%= @rows %>"
+    placeholder="<%= @placeholder %>"
+    spellcheck="false"
+    class="w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm font-mono 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 disabled:cursor-not-allowed disabled:opacity-50"
+    data-hw-json-input-target="textarea"
+    data-action="input->hw-json-input#validate"
+    <%= tag.attributes(@extra_attrs) %>><%= formatted_value %></textarea>
+  <div class="flex items-center gap-2 text-xs text-hw-muted-foreground" data-hw-json-input-target="status">
+    <span></span>
+  </div>
+</div>

data/app/components/hotwirebits/json_input_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class JsonInputComponent < Base
+    def initialize(name: nil, value: nil, placeholder: "{}", validate: true, rows: 6, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @validate = validate
+      @rows = rows
+      @extra_attrs = attrs
+    end
+
+    def formatted_value
+      return "" unless @value.present?
+
+      @value.is_a?(String) ? @value : JSON.pretty_generate(@value)
+    end
+  end
+end

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

@@ -0,0 +1,39 @@
+<div class="<%= container_classes %>"
+     data-controller="hw-kanban"
+     <%= tag.attributes(@extra_attrs) %>>
+  <% @columns.each do |col| %>
+    <div class="w-72 shrink-0 rounded-lg border border-hw-border bg-hw-muted/30 p-3"
+         data-hw-kanban-target="column"
+         data-column="<%= col[:title] %>">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="text-sm font-semibold text-hw-foreground"><%= col[:title] %></h3>
+        <span class="text-xs text-hw-muted-foreground bg-hw-muted rounded-full px-2 py-0.5">
+          <%= col[:items]&.size || 0 %>
+        </span>
+      </div>
+      <div class="space-y-2 min-h-[100px]"
+           data-hw-kanban-target="list"
+           data-action="dragover->hw-kanban#dragover drop->hw-kanban#drop">
+        <% (col[:items] || []).each do |item| %>
+          <div class="rounded-md border border-hw-border bg-hw-card p-3 shadow-sm cursor-grab active:cursor-grabbing"
+               draggable="true"
+               data-hw-kanban-target="card"
+               data-action="dragstart->hw-kanban#dragstart dragend->hw-kanban#dragend"
+            data-id="<%= item[:id] %>">
+            <p class="text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+            <% if item[:description] %>
+              <p class="mt-1 text-xs text-hw-muted-foreground line-clamp-2"><%= item[:description] %></p>
+            <% end %>
+            <% if item[:tags]&.any? %>
+              <div class="mt-2 flex flex-wrap gap-1">
+                <% item[:tags].each do |tag| %>
+                  <span class="inline-block rounded-full bg-hw-accent px-2 py-0.5 text-xs text-hw-accent-foreground"><%= tag %></span>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/kanban_board_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class KanbanBoardComponent < Base
+    def initialize(columns: [], **attrs)
+      @columns = columns
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "flex gap-4 overflow-x-auto pb-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<kbd class="<%= kbd_classes %>" <%= tag.attributes(@extra_attrs) %>><%= content || @label %></kbd>

data/app/components/hotwirebits/kbd_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class KbdComponent < Base
+    SIZES = {
+      sm: "px-1 py-0.5 text-[10px]",
+      md: "px-1.5 py-0.5 text-xs",
+      lg: "px-2 py-1 text-sm"
+    }.freeze
+
+    def initialize(label: nil, size: :md, **attrs)
+      @label = label
+      @size = size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def kbd_classes
+      merge_classes(
+        "pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-hw-border bg-hw-muted",
+        "font-mono font-medium text-hw-muted-foreground",
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<% size_px = { sm: 48, md: 64, lg: 96 }[@size] || 64 %>
+<% stroke = size_px / 10 %>
+<% radius = (size_px - stroke) / 2.0 %>
+<% circumference = 2 * Math::PI * radius %>
+<% progress = ((@value - @min).to_f / [@max - @min, 1].max) * 0.75 %>
+<% dashoffset = circumference * (1 - progress) %>
+<% center = size_px / 2.0 %>
+<% color_class = @color || 'hw-primary' %>
+<div class="relative inline-flex items-center justify-center" data-controller="hw-knob" <%= tag.attributes(@extra_attrs) %>>
+  <svg width="<%= size_px %>" height="<%= size_px %>" class="-rotate-[135deg]">
+    <circle cx="<%= center %>" cy="<%= center %>" r="<%= radius %>" fill="none" stroke="currentColor" stroke-width="<%= stroke %>" stroke-dasharray="<%= circumference * 0.75 %> <%= circumference * 0.25 %>" class="text-hw-muted"/>
+    <circle cx="<%= center %>" cy="<%= center %>" r="<%= radius %>" fill="none" stroke="currentColor" stroke-width="<%= stroke %>" stroke-dasharray="<%= circumference * 0.75 %> <%= circumference * 0.25 %>" stroke-dashoffset="<%= dashoffset %>" stroke-linecap="round" class="text-<%= color_class %> transition-all duration-150" data-hw-knob-target="progress"/>
+  </svg>
+  <span class="absolute text-xs font-medium text-hw-foreground" data-hw-knob-target="value"><%= @value %></span>
+      <input type="range" name="<%= @name %>" value="<%= @value %>" min="<%= @min %>" max="<%= @max %>" step="<%= @step %>" <%= 'disabled' if @disabled %> class="absolute inset-0 opacity-0 cursor-pointer" data-action="input->hw-knob#update">
+    </div>

data/app/components/hotwirebits/knob_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class KnobComponent < Base
+    SIZES = {
+      sm: 48,
+      md: 64,
+      lg: 96
+    }.freeze
+
+    def initialize(value: 0, min: 0, max: 100, step: 1, size: :md, color: nil, name: nil, disabled: false, **attrs)
+      @value = value.to_i
+      @min = min.to_i
+      @max = max.to_i
+      @step = step.to_i
+      @size = size
+      @color = color || "hw-primary"
+      @name = name
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<label class="<%= label_classes %>" <%= @for_field ? "for='#{@for_field}'" : '' %> <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+  <% if @required %><span class="text-hw-destructive"> *</span><% end %>
+<% if @optional %><span class="text-hw-muted-foreground font-normal text-xs ml-1">(optional)</span><% end %>
+</label>

data/app/components/hotwirebits/label_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class LabelComponent < Base
+    def initialize(for_field: nil, required: false, optional: false, **attrs)
+      @for_field = for_field
+      @required = required
+      @optional = optional
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def label_classes
+      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div class="fixed inset-0 z-50 hidden items-center justify-center bg-black/90"
+     data-controller="hw-lightbox"
+     data-hw-lightbox-images-value="<%= @images.to_json %>"
+     data-hw-lightbox-index-value="<%= @current_index %>"
+     data-hw-lightbox-target="overlay"
+     <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          class="absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#close">
+    <svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"/>
+    </svg>
+  </button>
+  <button type="button"
+          class="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#prev">
+    <svg class="h-6 w-6" 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="M15.75 19.5L8.25 12l7.5-7.5"/>
+    </svg>
+  </button>
+  <button type="button"
+          class="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#next">
+    <svg class="h-6 w-6" 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 4.5l7.5 7.5-7.5 7.5"/>
+    </svg>
+  </button>
+  <img data-hw-lightbox-target="image" src="" alt="" class="max-h-[90vh] max-w-[90vw] object-contain rounded-lg">
+  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-hw-primary-foreground/70" data-hw-lightbox-target="counter"></div>
+</div>

data/app/components/hotwirebits/lightbox_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class LightboxComponent < Base
+    def initialize(images: [], current_index: 0, **attrs)
+      @images = images
+      @current_index = current_index
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<button type="button"
+        class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors cursor-pointer <%= @liked ? 'text-hw-destructive bg-hw-destructive/10 hover:bg-hw-destructive/20' : 'text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground' %>"
+        data-controller="hw-like"
+        data-hw-like-liked-value="<%= @liked %>"
+        data-action="click->hw-like#toggle"
+  aria-pressed="<%= @liked %>"
+  <%= tag.attributes(@extra_attrs) %>>
+  <% if @name %>
+    <input type="hidden" name="<%= @name %>" value="<%= @liked %>" data-hw-like-target="input">
+  <% end %>
+  <svg class="<%= icon_size %>" data-hw-like-target="icon" xmlns="http://www.w3.org/2000/svg" fill="<%= @liked ? 'currentColor' : 'none' %>" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+  </svg>
+  <span data-hw-like-target="count"><%= @count %></span>
+</button>

data/app/components/hotwirebits/like_button_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class LikeButtonComponent < Base
+    SIZES = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6"
+    }.freeze
+
+    def initialize(liked: false, count: 0, name: nil, size: :md, **attrs)
+      @liked = liked
+      @count = count.to_i
+      @name = name
+      @size = size
+      @extra_attrs = attrs
+    end
+
+    def icon_size
+      SIZES[@size] || SIZES[:md]
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<ul role="list" class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</ul>

data/app/components/hotwirebits/list_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ListComponent < Base
+    def initialize(divided: true, with_actions: false, **attrs)
+      @divided = divided
+      @with_actions = with_actions
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "space-y-0",
+        @divided ? "divide-y divide-hw-border border-y border-hw-border" : "",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<div class="rounded-md border border-hw-input bg-hw-background" role="listbox" aria-multiselectable="<%= @multiple %>" data-controller="hw-listbox" <%= tag.attributes(@extra_attrs) %>>
+  <% @options.each do |opt| %>
+    <% selected = @selected.include?(opt[:value]) %>
+    <div class="<%= option_classes(selected, opt[:disabled]) %>" role="option" aria-selected="<%= selected %>" <%= 'aria-disabled="true"' if opt[:disabled] %> data-action="<%= 'click->hw-listbox#select' unless opt[:disabled] %>" data-value="<%= opt[:value] %>">
+      <% if selected %>
+        <svg class="h-4 w-4 text-hw-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+      <% end %>
+      <span class="flex-1"><%= opt[:label] %></span>
+    </div>
+  <% end %>
+  <% if @name %>
+    <% @selected.each do |v| %>
+      <input type="hidden" name="<%= @multiple ? "#{@name}[]" : @name %>" value="<%= v %>">
+    <% end %>
+  <% end %>
+</div>

data/app/components/hotwirebits/listbox_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ListboxComponent < Base
+    def initialize(name: nil, options: [], selected: nil, multiple: false, disabled: false, **attrs)
+      @name = name
+      @options = options
+      @selected = Array(selected)
+      @multiple = multiple
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def option_element(opt)
+      selected = @selected.include?(opt[:value])
+      tag.div(
+        class: option_classes(selected, opt[:disabled]),
+        role: "option",
+        aria: {selected: selected, disabled: opt[:disabled]},
+        data: {action: opt[:disabled] ? nil : "click->hw-listbox#select", value: opt[:value]}
+      ) do
+        safe_join([
+          (check_icon if selected),
+          tag.span(opt[:label], class: "flex-1")
+        ].compact)
+      end
+    end
+
+    def option_classes(selected, disabled)
+      merge_classes(
+        "flex items-center gap-2 px-3 py-2 text-sm cursor-pointer transition-colors",
+        "first:rounded-t-md last:rounded-b-md",
+        "hover:bg-hw-accent hover:text-hw-accent-foreground",
+        selected ? "bg-hw-accent text-hw-accent-foreground" : "text-hw-foreground",
+        disabled ? "opacity-50 pointer-events-none" : ""
+      )
+    end
+
+    def check_icon
+      tag.svg(class: "h-4 w-4 text-hw-primary shrink-0", fill: "none", stroke: "currentColor", stroke_width: "2",
+        viewBox: "0 0 24 24") do
+        tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M5 13l4 4L19 7")
+      end
+    end
+
+    def hidden_inputs
+      safe_join(@selected.map { |v| tag.input(type: "hidden", name: @multiple ? "#{@name}[]" : @name, value: v) })
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<div class="relative" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+  <div class="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-md bg-hw-background/60 backdrop-blur-[1px]">
+    <svg class="<%= spinner_class %> animate-spin text-hw-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+    </svg>
+    <% if @text %>
+      <p class="mt-2 text-sm text-hw-muted-foreground"><%= @text %></p>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/loading_overlay_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class LoadingOverlayComponent < Base
+    SIZES = {
+      sm: "h-4 w-4",
+      md: "h-8 w-8",
+      lg: "h-12 w-12"
+    }.freeze
+
+    def initialize(text: nil, message: nil, spinner_size: :md, **attrs)
+      @text = text || message
+      @spinner_size = spinner_size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def spinner_class
+      SIZES[@spinner_size] || SIZES[:md]
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-5xl text-center">
+    <% if @title %>
+      <p class="text-sm font-medium text-hw-muted-foreground mb-8"><%= @title %></p>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% @logos.each do |logo| %>
+        <a href="<%= logo[:url] || '#' %>"
+           class="flex items-center justify-center grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all"
+           target="_blank" rel="noopener noreferrer">
+          <% if logo[:image_url] %>
+            <img src="<%= logo[:image_url] %>" alt="<%= logo[:name] %>" class="h-8 md:h-10 object-contain">
+          <% else %>
+            <span class="text-lg font-semibold text-hw-muted-foreground"><%= logo[:name] %></span>
+          <% end %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+</section>