hotwirebits 0.1.0

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

@@ -0,0 +1,46 @@
+<div class="rounded-xl border border-hw-border bg-white" <%= tag.attributes(@extra_attrs) %>>
+  <div class="border-b border-hw-border px-6 py-4">
+    <h2 class="text-lg font-semibold text-hw-foreground">Shopping Cart (<%= @items.size %>)</h2>
+  </div>
+  <% if @items.empty? %>
+    <div class="flex flex-col items-center justify-center px-6 py-12 text-center">
+      <svg class="mb-3 h-12 w-12 text-hw-muted-foreground/40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
+      </svg>
+      <p class="text-sm text-hw-muted-foreground">Your cart is empty</p>
+    </div>
+  <% else %>
+    <ul class="divide-y divide-hw-border">
+      <% @items.each do |item| %>
+        <li class="flex gap-4 px-6 py-4">
+          <% if item[:image] %>
+            <img src="<%= item[:image] %>" alt="<%= item[:name] %>" class="h-16 w-16 shrink-0 rounded-lg object-cover">
+          <% end %>
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-sm font-medium text-hw-foreground"><%= item[:name] %></p>
+            <p class="mt-0.5 text-sm text-hw-muted-foreground"><%= item[:price] %></p>
+            <div class="mt-2 flex items-center gap-2">
+              <button type="button" class="flex h-6 w-6 items-center justify-center rounded border border-hw-border text-xs hover:bg-hw-muted">-</button>
+              <span class="text-sm font-medium"><%= item[:quantity] %></span>
+              <button type="button" class="flex h-6 w-6 items-center justify-center rounded border border-hw-border text-xs hover:bg-hw-muted">+</button>
+            </div>
+          </div>
+          <button type="button" class="shrink-0 self-start text-hw-muted-foreground hover:text-hw-destructive">
+            <svg class="h-4 w-4" 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>
+        </li>
+      <% end %>
+    </ul>
+    <div class="border-t border-hw-border px-6 py-4">
+      <div class="flex items-center justify-between text-base font-semibold text-hw-foreground">
+        <span>Total</span>
+        <span><%= @total.is_a?(Numeric) ? "$#{'%.2f' % @total}" : @total %></span>
+      </div>
+      <button type="button" class="mt-4 w-full rounded-lg bg-hw-primary px-6 py-3 text-sm font-semibold text-hw-primary-foreground hover:bg-hw-primary/90">
+        Checkout
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/shopping_cart_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ShoppingCartComponent < Base
+    def initialize(items: [], total: nil, **attrs)
+      @items = items
+      @total = total || calculate_total
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def calculate_total
+      @items.sum { |item| (item[:price].to_s.gsub(/[^0-9.]/, "").to_f * item[:quantity].to_i) }
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+<aside class="<%= sidebar_classes %>"
+       style="<%= "width: #{@width}px" unless @collapsed %>"
+       data-controller="hw-sidebar"
+       data-hw-sidebar-collapsed-value="<%= @collapsed %>"
+       <%= tag.attributes(@extra_attrs) %>>
+  <% if header? %>
+    <div class="flex h-14 items-center border-b border-hw-border px-4">
+      <%= header %>
+    </div>
+  <% elsif @title %>
+    <div class="flex h-14 items-center border-b border-hw-border px-4">
+      <span class="text-lg font-semibold"><%= @title %></span>
+    </div>
+  <% end %>
+  <div class="flex-1 overflow-y-auto py-2">
+    <% if body? %>
+      <%= body %>
+    <% elsif @items.any? %>
+      <nav class="space-y-1 px-2">
+        <% @items.each do |item| %>
+          <a href="<%= item[:href] %>"
+             class="<%= merge_classes(
+               'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+               item[:active] ? 'bg-hw-accent text-hw-accent-foreground' : 'text-hw-muted-foreground hover:bg-hw-accent/50 hover:text-hw-accent-foreground'
+             ) %>">
+            <% if item[:icon] %>
+              <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+            <% end %>
+            <span class="<%= @collapsed ? 'hidden' : '' %>"><%= item[:label] %></span>
+          </a>
+        <% end %>
+      </nav>
+    <% end %>
+  </div>
+  <% if footer? %>
+    <div class="border-t border-hw-border p-4">
+      <%= footer %>
+    </div>
+  <% end %>
+</aside>

data/app/components/hotwirebits/sidebar_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SidebarComponent < Base
+    renders_one :header
+    renders_one :body
+    renders_one :footer
+
+    def initialize(items: [], collapsed: false, width: 260, mobile: false, title: nil, **attrs)
+      @items = items
+      @collapsed = collapsed
+      @width = width
+      @mobile = mobile
+      @title = title
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def sidebar_classes
+      merge_classes(
+        "flex h-full flex-col border-r border-hw-border bg-hw-background",
+        "transition-[width] duration-300 ease-in-out",
+        @collapsed ? "w-16" : nil,
+        @mobile ? "fixed inset-y-0 left-0 z-50 shadow-lg" : nil
+      )
+    end
+  end
+end

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

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

data/app/components/hotwirebits/simple_grid_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SimpleGridComponent < Base
+    def initialize(min_col_width: "250px", gap: nil, **attrs)
+      @min_col_width = min_col_width
+      @gap = gap
+      @extra_attrs = attrs
+    end
+
+    def grid_classes
+      merge_classes(
+        "grid",
+        @gap && "gap-#{@gap}",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def grid_styles
+      "grid-template-columns: repeat(auto-fit, minmax(#{@min_col_width}, 1fr));"
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<div class="rounded-lg border border-hw-border bg-hw-card p-4 shadow-sm" <%= tag.attributes(@extra_attrs) %>>
+  <% if @has_image %>
+    <div class="mb-4 h-32 w-full animate-pulse rounded-md bg-hw-muted"></div>
+  <% end %>
+  <div class="flex items-start gap-3">
+    <% if @has_avatar %>
+      <div class="h-10 w-10 shrink-0 animate-pulse rounded-full bg-hw-muted"></div>
+    <% end %>
+    <div class="flex-1 space-y-2">
+      <% @lines.times do |i| %>
+        <div class="h-4 animate-pulse rounded-md bg-hw-muted <%= line_width(i) %>"></div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/skeleton_card_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SkeletonCardComponent < Base
+    def initialize(lines: 3, has_image: false, has_avatar: false, **attrs)
+      @lines = lines
+      @has_image = has_image
+      @has_avatar = has_avatar
+      @extra_attrs = attrs
+    end
+
+    def line_width(index)
+      widths = ["w-full", "w-4/5", "w-3/4", "w-2/3", "w-1/2"]
+      widths[index % widths.length]
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<% style = [] %>
+<% style << "width: #{@circle_size || '40px'}; height: #{@circle_size || '40px'};" if @shape == :circle %>
+<% style << "width: #{@width};" if @width && @shape != :circle %>
+<% style << "height: #{@height};" if @height && @shape != :circle %>
+<div class="animate-pulse bg-hw-muted <%= @shape == :circle ? 'rounded-full' : @shape == :text ? 'rounded h-4 w-full' : 'rounded-md' %>" style="<%= style.join %>" <%= tag.attributes(@extra_attrs) %>></div>

data/app/components/hotwirebits/skeleton_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SkeletonComponent < Base
+    def initialize(shape: :rectangle, width: nil, height: nil, circle_size: nil, **attrs)
+      @shape = shape
+      @width = width
+      @height = height
+      @circle_size = circle_size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def skeleton_classes
+      base = "animate-pulse bg-hw-muted"
+      case @shape
+      when :circle
+        merge_classes(base, "rounded-full")
+      when :text
+        merge_classes(base, "rounded h-4 w-full")
+      else
+        merge_classes(base, "rounded-md")
+      end
+    end
+
+    def skeleton_style
+      styles = []
+      if @shape == :circle
+        size = @circle_size || "40px"
+        styles << "width: #{size}; height: #{size};"
+      else
+        styles << "width: #{@width};" if @width
+        styles << "height: #{@height};" if @height
+      end
+      styles.join(" ")
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="relative w-full">
+  <input type="range" name="<%= @name %>" value="<%= @value %>" min="<%= @min %>" max="<%= @max %>" step="<%= @step %>" <%= 'disabled' if @disabled %> class="<%= slider_classes %>" <%= tag.attributes(@extra_attrs) %>>
+</div>

data/app/components/hotwirebits/slider_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SliderComponent < Base
+    def initialize(name: nil, value: 0, min: 0, max: 100, step: 1, disabled: false, show_value: false, color: nil,
+      **attrs)
+      @name = name
+      @value = value
+      @min = min
+      @max = max
+      @step = step
+      @disabled = disabled
+      @show_value = show_value
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def slider_classes
+      merge_classes(
+        "w-full h-2 bg-hw-input rounded-lg appearance-none cursor-pointer",
+        "accent-hw-primary",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4",
+        "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full",
+        "[&::-webkit-slider-thumb]:bg-hw-primary [&::-webkit-slider-thumb]:cursor-pointer",
+        "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4",
+        "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary",
+        "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="flex items-center gap-2" <%= tag.attributes(@extra_attrs) %>>
+  <% @platforms.each do |platform| %>
+    <a href="<%= share_url(platform) %>"
+       target="_blank"
+       rel="noopener noreferrer"
+       class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors"
+       aria-label="Share on <%= platform.to_s.capitalize %>">
+      <% case platform %>
+      <% when :twitter %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+      <% when :facebook %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
+      <% when :linkedin %>
+        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+      <% when :email %>
+        <svg class="h-4 w-4" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+      <% end %>
+    </a>
+  <% end %>
+</div>

data/app/components/hotwirebits/social_share_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SocialShareComponent < Base
+    PLATFORMS = %i[twitter facebook linkedin email].freeze
+
+    def initialize(url:, title: nil, platforms: %i[twitter facebook linkedin email], **attrs)
+      @url = url
+      @title = title
+      @platforms = platforms & PLATFORMS
+      @extra_attrs = attrs
+    end
+
+    def share_url(platform)
+      encoded_url = ERB::Util.url_encode(@url)
+      encoded_title = ERB::Util.url_encode(@title.to_s)
+      case platform
+      when :twitter then "https://twitter.com/intent/tweet?url=#{encoded_url}&text=#{encoded_title}"
+      when :facebook then "https://www.facebook.com/sharer/sharer.php?u=#{encoded_url}"
+      when :linkedin then "https://www.linkedin.com/sharing/share-offsite/?url=#{encoded_url}"
+      when :mailto then "mailto:?subject=#{encoded_title}&body=#{encoded_url}"
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<div class="<%= space_classes %>" style="<%= space_styles %>" aria-hidden="true" <%= tag.attributes(@extra_attrs) %>></div>

data/app/components/hotwirebits/space_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SpaceComponent < Base
+    def initialize(h: nil, w: nil, **attrs)
+      @h = h
+      @w = w
+      @extra_attrs = attrs
+    end
+
+    def space_styles
+      styles = []
+      styles << "height: #{@h};" if @h
+      styles << "width: #{@w};" if @w
+      styles.join(" ")
+    end
+
+    def space_classes
+      merge_classes("shrink-0", @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<div class="<%= container_classes %>" data-controller="hw-speed-dial" <%= tag.attributes(@extra_attrs) %>>
+  <div data-hw-speed-dial-target="actions" class="<%= actions_classes %> hidden">
+    <% @actions.each do |action| %>
+      <div class="flex items-center gap-2">
+        <% if action[:label] %>
+          <span class="rounded bg-hw-foreground px-2 py-1 text-xs text-hw-background shadow"><%= action[:label] %></span>
+        <% end %>
+        <a href="<%= action[:href] %>" class="<%= action_classes %>" aria-label="<%= action[:label] %>">
+          <% if action[:icon] %>
+            <span class="h-5 w-5"><%= safe_svg(action[:icon]) %></span>
+          <% end %>
+        </a>
+      </div>
+    <% end %>
+  </div>
+  <button type="button"
+          class="<%= fab_classes %>"
+          data-action="click->hw-speed-dial#toggle"
+    aria-label="Open actions">
+    <svg class="h-6 w-6 transition-transform duration-200" data-hw-speed-dial-target="icon" 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="M12 4v16m8-8H4"/>
+    </svg>
+  </button>
+</div>

data/app/components/hotwirebits/speed_dial_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SpeedDialComponent < Base
+    POSITIONS = {
+      "bottom-right" => "fixed bottom-6 right-6",
+      "bottom-left" => "fixed bottom-6 left-6",
+      "top-right" => "fixed top-6 right-6",
+      "top-left" => "fixed top-6 left-6"
+    }.freeze
+
+    def initialize(actions: [], direction: :up, position: "bottom-right", **attrs)
+      @actions = actions
+      @direction = direction
+      @position = position
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def container_classes
+      merge_classes("flex flex-col items-center gap-2", POSITIONS[@position])
+    end
+
+    def actions_classes
+      merge_classes(
+        "flex gap-2",
+        (@direction == :up) ? "flex-col-reverse items-center" : nil,
+        (@direction == :left) ? "flex-row-reverse items-center" : nil
+      )
+    end
+
+    def fab_classes
+      "inline-flex h-14 w-14 items-center justify-center rounded-full bg-hw-primary text-hw-primary-foreground shadow-lg hover:bg-hw-primary/90 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2"
+    end
+
+    def action_classes
+      "inline-flex h-10 w-10 items-center justify-center rounded-full bg-hw-secondary text-hw-secondary-foreground shadow-md hover:bg-hw-secondary/80 transition-colors"
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div class="fixed bottom-6 right-6 z-40" data-controller="hw-speed-dial" <%= tag.attributes(@extra_attrs) %>>
+  <div class="relative flex items-center justify-center">
+    <div data-hw-speed-dial-target="actions" class="hidden">
+      <% @actions.each_with_index do |action, index| %>
+        <a href="<%= action[:href] %>"
+           class="absolute flex h-12 w-12 items-center justify-center rounded-full bg-hw-muted text-hw-foreground shadow-lg transition-all hover:bg-hw-muted/80"
+           style="<%= action_position(index) %>"
+           title="<%= action[:label] %>">
+          <% if action[:icon] %>
+            <svg class="h-5 w-5" 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="<%= action[:icon] %>"/>
+            </svg>
+          <% else %>
+            <span class="text-xs font-medium"><%= action[:label]&.first %></span>
+            <% end %>
+            <span class="absolute right-full mr-2 whitespace-nowrap rounded bg-hw-foreground px-2 py-1 text-xs text-hw-background opacity-0 transition-opacity group-hover:opacity-100 pointer-events-none">
+              <%= action[:label] %>
+            </span>
+          </a>
+        <% end %>
+      </div>
+      <button type="button"
+            class="flex h-14 w-14 items-center justify-center rounded-full bg-hw-primary text-hw-primary-foreground shadow-lg transition-transform hover:bg-hw-primary/90 focus:outline-none focus:ring-2 focus:ring-hw-ring"
+            data-action="click->hw-speed-dial#toggle">
+        <svg class="h-6 w-6 transition-transform duration-200" data-hw-speed-dial-target="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <%= safe_svg(@icon) %>
+        </svg>
+      </button>
+    </div>
+  </div>

data/app/components/hotwirebits/speed_dial_fab_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SpeedDialFabComponent < Base
+    DIRECTIONS = %i[up left].freeze
+
+    def initialize(icon: nil, actions: [], direction: :up, **attrs)
+      @icon = icon || default_icon
+      @actions = actions
+      @direction = DIRECTIONS.include?(direction) ? direction : :up
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def default_icon
+      '<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>'
+    end
+
+    def action_position(index)
+      case @direction
+      when :up then "bottom: #{(index + 1) * 56}px; right: 0;"
+      when :left then "right: #{(index + 1) * 56}px; bottom: 0;"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<div class="inline-flex items-center gap-2" role="status" <%= tag.attributes(@extra_attrs) %>>
+  <svg class="animate-spin text-hw-muted-foreground <%= SIZES[@size] || 'h-6 w-6' %>" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+  <% if @show_label %>
+    <span class="text-sm text-hw-muted-foreground"><%= @label %></span>
+  <% end %>
+  <span class="sr-only"><%= @label %></span>
+</div>

data/app/components/hotwirebits/spinner_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SpinnerComponent < Base
+    SIZES = {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12"
+    }.freeze
+
+    def initialize(size: :md, label: "Loading...", show_label: false, **attrs)
+      @size = size
+      @label = label
+      @show_label = show_label
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="relative inline-flex" data-controller="hw-dropdown" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button" class="<%= button_classes %>"><%= @label %></button>
+  <button type="button"
+          class="<%= trigger_classes %>"
+          data-action="click->hw-dropdown#toggle click@window->hw-dropdown#closeOnClickOutside">
+    <svg class="h-4 w-4" 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="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div data-hw-dropdown-target="menu" class="hidden absolute right-0 top-full mt-1 z-50 min-w-[10rem] overflow-hidden rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md">
+    <% @items.each do |item| %>
+      <a href="<%= item[:href] %>"
+         class="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors"
+         data-action="click->hw-dropdown#close">
+        <% if item[:icon] %>
+          <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+        <% end %>
+        <span><%= item[:label] %></span>
+      </a>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/split_button_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SplitButtonComponent < Base
+    VARIANTS = {
+      default: "bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90",
+      destructive: "bg-hw-destructive text-hw-destructive-foreground hover:bg-hw-destructive/90",
+      outline: "border border-hw-input bg-hw-background hover:bg-hw-accent hover:text-hw-accent-foreground",
+      secondary: "bg-hw-secondary text-hw-secondary-foreground hover:bg-hw-secondary/80"
+    }.freeze
+
+    def initialize(label:, variant: :default, items: [], **attrs)
+      @label = label
+      @variant = variant
+      @items = items
+      @extra_attrs = attrs
+    end
+
+    def button_classes
+      merge_classes(
+        "inline-flex h-9 items-center justify-center rounded-l-md px-4 text-sm font-medium transition-colors cursor-pointer",
+        VARIANTS[@variant] || VARIANTS[:default]
+      )
+    end
+
+    def trigger_classes
+      merge_classes(
+        "inline-flex h-9 w-9 items-center justify-center rounded-r-md border-l border-white/20 text-sm font-medium transition-colors cursor-pointer",
+        VARIANTS[@variant] || VARIANTS[:default]
+      )
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div data-controller="hw-splitter" class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="overflow-hidden" style="<%= panel_1_style %>" data-hw-splitter-target="panel1">
+    <%= slot_1 %>
+  </div>
+  <div class="<%= handle_classes %>" data-hw-splitter-target="handle" data-action="pointerdown->hw-splitter#startResize"></div>
+  <div class="overflow-hidden" style="<%= panel_2_style %>" data-hw-splitter-target="panel2">
+    <%= slot_2 %>
+  </div>
+</div>

data/app/components/hotwirebits/splitter_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SplitterComponent < Base
+    renders_one :slot_1
+    renders_one :slot_2
+
+    def initialize(direction: :horizontal, default_sizes: [50, 50], **attrs)
+      @direction = direction
+      @default_sizes = default_sizes
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "flex",
+        (@direction == :horizontal) ? "flex-row h-full" : "flex-col w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def handle_classes
+      if @direction == :horizontal
+        "w-[3px] cursor-col-resize bg-hw-border hover:bg-hw-primary active:bg-hw-primary shrink-0 transition-colors"
+      else
+        "h-[3px] cursor-row-resize bg-hw-border hover:bg-hw-primary active:bg-hw-primary shrink-0 transition-colors"
+      end
+    end
+
+    def panel_1_style
+      "flex-basis: #{@default_sizes[0]}%;"
+    end
+
+    def panel_2_style
+      "flex-basis: #{@default_sizes[1]}%;"
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<div data-controller="hw-spoiler"
+     data-hw-spoiler-max-height-value="<%= @max_height %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="overflow-hidden relative" data-hw-spoiler-target="container" style="max-height: <%= @max_height %>px;">
+    <%= content %>
+    <div class="absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-hw-background to-transparent"
+         data-hw-spoiler-target="gradient"></div>
+  </div>
+  <button
+    type="button"
+    class="mt-1 text-sm font-medium text-hw-primary hover:underline"
+    data-action="click->hw-spoiler#toggle"
+    data-hw-spoiler-target="button"
+    >
+    <%= @show_more_label %>
+  </button>
+</div>