hotwirebits 0.1.0

data/app/views/hotwirebits/_shopping_cart.html.erb

@@ -0,0 +1,49 @@
+<%# ShoppingCart component — ERB partial %>
+<%# Usage: render 'hotwirebits/shopping_cart', ... %>
+
+<div class="rounded-xl border border-hw-border bg-white" <%= tag.attributes(local_assigns) %>>
+  <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/views/hotwirebits/_sidebar.html.erb

@@ -0,0 +1,39 @@
+<%# Sidebar component — ERB partial %>
+<%# Usage: render 'hotwirebits/sidebar', ... %>
+
+<aside class="<%= sidebar_classes %>"
+       style="<%= "width: #{width}px" unless collapsed %>"
+       data-controller="hw-sidebar"
+       data-hw-sidebar-collapsed-value="<%= collapsed %>"
+       <%= tag.attributes(local_assigns) %>>
+  <% if header? %>
+    <div class="flex h-14 items-center border-b border-hw-border px-4">
+      <%= header %>
+    </div>
+  <% end %>
+  <div class="flex-1 overflow-y-auto py-2">
+    <% if content? %>
+      <%= content %>
+    <% 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/views/hotwirebits/_simple_grid.html.erb

@@ -0,0 +1,6 @@
+<%# SimpleGrid component — ERB partial %>
+<%# Usage: render 'hotwirebits/simple_grid', ... %>
+
+<div class="<%= grid_classes %>" style="<%= grid_styles %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</div>

data/app/views/hotwirebits/_skeleton.html.erb

@@ -0,0 +1,20 @@
+<%# Skeleton component — ERB partial %>
+<%# Usage: render 'hotwirebits/skeleton', shape: :rectangle %>
+
+<%
+  shape       = local_assigns.fetch(:shape, :rectangle)
+  width       = local_assigns[:width]
+  height      = local_assigns[:height]
+  circle_size = local_assigns[:circle_size]
+
+  style = []
+  if shape == :circle
+    style << "width: #{circle_size || '40px'}; height: #{circle_size || '40px'};"
+  else
+    style << "width: #{width};" if width
+    style << "height: #{height};" if height
+  end
+  shape_cls = shape == :circle ? 'rounded-full' : shape == :text ? 'rounded h-4 w-full' : 'rounded-md'
+%>
+
+<div class="animate-pulse bg-hw-muted <%= shape_cls %>" style="<%= style.join %>"></div>

data/app/views/hotwirebits/_skeleton_card.html.erb

@@ -0,0 +1,18 @@
+<%# SkeletonCard component — ERB partial %>
+<%# Usage: render 'hotwirebits/skeleton_card', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-card p-4 shadow-sm" <%= tag.attributes(local_assigns) %>>
+  <% 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/views/hotwirebits/_slider.html.erb

@@ -0,0 +1,17 @@
+<%# Slider component — ERB partial %>
+<%# Usage: render 'hotwirebits/slider', name: "volume", min: 0, max: 100, value: 50 %>
+
+<%
+  name     = local_assigns.fetch(:name, "")
+  value    = local_assigns.fetch(:value, 50)
+  min      = local_assigns.fetch(:min, 0)
+  max      = local_assigns.fetch(:max, 100)
+  step     = local_assigns.fetch(:step, 1)
+  disabled = local_assigns.fetch(:disabled, false)
+
+  slider_cls = "w-full h-2 rounded-lg appearance-none cursor-pointer bg-hw-muted accent-hw-primary disabled:cursor-not-allowed disabled:opacity-50"
+%>
+
+<div class="relative w-full">
+  <input type="range" name="<%= name %>" value="<%= value %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="<%= slider_cls %>">
+</div>

data/app/views/hotwirebits/_social_share.html.erb

@@ -0,0 +1,23 @@
+<%# SocialShare component — ERB partial %>
+<%# Usage: render 'hotwirebits/social_share', ... %>
+
+<div class="flex items-center gap-2" <%= tag.attributes(local_assigns) %>>
+  <% 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/views/hotwirebits/_space.html.erb

@@ -0,0 +1,4 @@
+<%# Space component — ERB partial %>
+<%# Usage: render 'hotwirebits/space', ... %>
+
+<div class="<%= space_classes %>" style="<%= space_styles %>" aria-hidden="true" <%= tag.attributes(local_assigns) %>></div>

data/app/views/hotwirebits/_speed_dial.html.erb

@@ -0,0 +1,27 @@
+<%# SpeedDial component — ERB partial %>
+<%# Usage: render 'hotwirebits/speed_dial', ... %>
+
+<div class="<%= container_classes %>" data-controller="hw-speed-dial" <%= tag.attributes(local_assigns) %>>
+  <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/views/hotwirebits/_speed_dial_fab.html.erb

@@ -0,0 +1,33 @@
+<%# SpeedDialFab component — ERB partial %>
+<%# Usage: render 'hotwirebits/speed_dial_fab', ... %>
+
+<div class="fixed bottom-6 right-6 z-40" data-controller="hw-speed-dial" <%= tag.attributes(local_assigns) %>>
+  <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/views/hotwirebits/_spinner.html.erb

@@ -0,0 +1,22 @@
+<%# Spinner component — ERB partial %>
+<%# Usage: render 'hotwirebits/spinner', size: :md %>
+
+<%
+  size       = local_assigns.fetch(:size, :md)
+  label      = local_assigns.fetch(:label, "Loading...")
+  show_label = local_assigns.fetch(:show_label, false)
+
+  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" }
+  size_cls = sizes.fetch(size, "h-6 w-6")
+%>
+
+<div class="inline-flex items-center gap-2" role="status">
+  <svg class="animate-spin text-hw-muted-foreground <%= size_cls %>" 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/views/hotwirebits/_split_button.html.erb

@@ -0,0 +1,23 @@
+<%# SplitButton component — ERB partial %>
+<%# Usage: render 'hotwirebits/split_button', ... %>
+
+<div class="relative inline-flex" data-controller="hw-dropdown" <%= tag.attributes(local_assigns) %>>
+  <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/views/hotwirebits/_splitter.html.erb

@@ -0,0 +1,12 @@
+<%# Splitter component — ERB partial %>
+<%# Usage: render 'hotwirebits/splitter', ... %>
+
+<div data-controller="hw-splitter" class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <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/views/hotwirebits/_spoiler.html.erb

@@ -0,0 +1,20 @@
+<%# Spoiler component — ERB partial %>
+<%# Usage: render 'hotwirebits/spoiler', ... %>
+
+<div data-controller="hw-spoiler"
+     data-hw-spoiler-max-height-value="<%= max_height %>"
+     <%= tag.attributes(local_assigns) %>>
+  <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>

data/app/views/hotwirebits/_stack.html.erb

@@ -0,0 +1,20 @@
+<%# Stack component — ERB partial %>
+<%# Usage: render 'hotwirebits/stack', gap: 4 %>
+
+<%
+  gap         = local_assigns.fetch(:gap, 4)
+  align       = local_assigns[:align]
+  extra_class = local_assigns[:class]
+
+  align_cls = case align
+              when :center then "items-center"
+              when :end then "items-end"
+              when :stretch then "items-stretch"
+              else ""
+              end
+  stack_cls = ["flex flex-col gap-#{gap} #{align_cls}", extra_class].compact.join(" ")
+%>
+
+<div class="<%= stack_cls %>">
+  <% if block_given? %><%= yield %><% end %>
+</div>

data/app/views/hotwirebits/_stacked_list.html.erb

@@ -0,0 +1,23 @@
+<%# StackedList component — ERB partial %>
+<%# Usage: render 'hotwirebits/stacked_list', ... %>
+
+<ul class="<%= container_classes %>" role="list" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <li class="flex items-center gap-4 px-4 py-3">
+      <% if item[:avatar] %>
+        <img src="<%= item[:avatar] %>" alt="" class="h-10 w-10 shrink-0 rounded-full object-cover">
+      <% end %>
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+        <% if item[:subtitle] %>
+          <p class="truncate text-sm text-hw-muted-foreground"><%= item[:subtitle] %></p>
+        <% end %>
+      </div>
+      <% if item[:action] %>
+        <div class="shrink-0">
+          <%= item[:action] %>
+        </div>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

data/app/views/hotwirebits/_stat.html.erb

@@ -0,0 +1,24 @@
+<%# Stat component — ERB partial %>
+<%# Usage: render 'hotwirebits/stat', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between">
+    <p class="text-sm font-medium text-hw-muted-foreground"><%= title %></p>
+    <% if icon %>
+      <span class="text-hw-muted-foreground"><%= icon %></span>
+    <% end %>
+  </div>
+  <div class="mt-2">
+    <p class="text-2xl font-bold"><%= value %></p>
+    <div class="flex items-center gap-2 mt-1">
+      <% if trend_value %>
+        <span class="text-sm font-medium <%= trend_color %>">
+          <%= trend_up ? '↑' : '↓' %> <%= trend_value %>
+        </span>
+      <% end %>
+      <% if description %>
+        <span class="text-sm text-hw-muted-foreground"><%= description %></span>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/hotwirebits/_stats.html.erb

@@ -0,0 +1,6 @@
+<%# Stats component — ERB partial %>
+<%# Usage: render 'hotwirebits/stats', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</div>

data/app/views/hotwirebits/_status.html.erb

@@ -0,0 +1,9 @@
+<%# Status component — ERB partial %>
+<%# Usage: render 'hotwirebits/status', ... %>
+
+<span class="inline-flex items-center gap-1.5" <%= tag.attributes(local_assigns) %>>
+  <span class="rounded-full <%= COLORS[status] || 'bg-hw-muted-foreground/60' %> <%= SIZES[size] || 'h-2.5 w-2.5' %>"></span>
+<% if label %>
+  <span class="text-sm text-hw-muted-foreground"><%= label %></span>
+<% end %>
+</span>

data/app/views/hotwirebits/_status_bar.html.erb

@@ -0,0 +1,16 @@
+<%# StatusBar component — ERB partial %>
+<%# Usage: render 'hotwirebits/status_bar', ... %>
+
+<div class="flex items-center justify-between px-4 py-1.5 bg-hw-muted/80 border-hw-border text-xs text-hw-muted-foreground <%= position_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <div class="flex items-center gap-1.5">
+      <% if item[:icon] %>
+        <span class="h-3.5 w-3.5"><%= safe_svg(item[:icon]) %></span>
+      <% end %>
+      <span><%= item[:label] %></span>
+      <% if item[:value] %>
+        <span class="font-medium text-hw-foreground"><%= item[:value] %></span>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/hotwirebits/_status_dot.html.erb

@@ -0,0 +1,9 @@
+<%# StatusDot component — ERB partial %>
+<%# Usage: render 'hotwirebits/status_dot', ... %>
+
+<span class="relative inline-flex" <%= tag.attributes(local_assigns) %>>
+  <span class="<%= dot_classes %>"></span>
+<% if with_pulse %>
+  <span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 <%= STATUSES[status] || 'bg-hw-success' %>"></span>
+<% end %>
+</span>

data/app/views/hotwirebits/_stepper_form.html.erb

@@ -0,0 +1,58 @@
+<%# StepperForm component — ERB partial %>
+<%# Usage: render 'hotwirebits/stepper_form', ... %>
+
+<div data-controller="hw-stepper-form"
+     data-hw-stepper-form-current-step-value="<%= current_step %>"
+     data-hw-stepper-form-total-steps-value="<%= total_steps %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between mb-8">
+    <% steps.each_with_index do |step, idx| %>
+      <% state = step_state(idx) %>
+      <div class="flex items-center<%= ' flex-1' unless idx == steps.size - 1 %>">
+        <div class="flex items-center gap-3">
+          <div class="<%= merge_classes('flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors',
+            state == :completed ? 'bg-hw-primary text-hw-primary-foreground' : state == :current ? 'border-2 border-hw-primary text-hw-primary' : 'border-2 border-hw-border text-hw-muted-foreground') %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </div>
+          <span class="text-sm font-medium <%= state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground' %>"><%= step[:label] %></span>
+        </div>
+        <% unless idx == steps.size - 1 %>
+          <div class="flex-1 mx-4 h-0.5 <%= idx < current_step ? 'bg-hw-primary' : 'bg-hw-border' %>"></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="min-h-[200px]">
+    <% steps.each_with_index do |step, idx| %>
+      <div data-hw-stepper-form-target="stepPanel"
+           class="<%= idx == current_step ? '' : 'hidden' %>">
+        <%= step[:content] %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-center justify-between mt-6 pt-6 border-t border-hw-border">
+    <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 text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+            data-hw-stepper-form-target="prevBtn"
+            data-action="click->hw-stepper-form#prev"
+      <%= current_step == 0 ? 'disabled' : '' %>>
+      Previous
+    </button>
+    <% if current_step == total_steps - 1 %>
+      <button type="submit"
+              class="inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors cursor-pointer">
+        <%= submit_label %>
+      </button>
+    <% else %>
+      <button type="button"
+              class="inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors cursor-pointer"
+              data-action="click->hw-stepper-form#next">
+        Next
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/views/hotwirebits/_steps.html.erb

@@ -0,0 +1,48 @@
+<%# Steps component — ERB partial %>
+<%# Usage: render 'hotwirebits/steps', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% steps.each_with_index do |step, idx| %>
+    <% state = step_state(idx) %>
+    <div class="flex flex-col items-center">
+      <div class="flex items-center">
+        <% if clickable && step[:href] %>
+          <a href="<%= step[:href] %>" class="<%= step_circle_classes(state) %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </a>
+        <% else %>
+          <div class="<%= step_circle_classes(state) %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </div>
+        <% end %>
+        <% if orientation == :vertical %>
+          <div class="ml-3">
+            <p class="<%= merge_classes('text-sm font-medium', state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground') %>"><%= step[:label] %></p>
+            <% if step[:description] %>
+              <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= step[:description] %></p>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% if orientation == :horizontal %>
+        <div class="mt-2 text-center">
+          <p class="<%= merge_classes('text-sm font-medium', state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground') %>"><%= step[:label] %></p>
+          <% if step[:description] %>
+            <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= step[:description] %></p>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% unless idx == steps.size - 1 %>
+      <div class="<%= connector_classes(idx) %>"></div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/hotwirebits/_swap.html.erb

@@ -0,0 +1,20 @@
+<%# Swap component — ERB partial %>
+<%# Usage: render 'hotwirebits/swap', ... %>
+
+<label class="swap inline-flex items-center cursor-pointer <%= effect_class %>"
+       data-controller="hw-swap"
+       data-hw-swap-active-value="<%= on? %>">
+  <input type="checkbox" data-action="change->hw-swap#toggle" class="sr-only" <%= 'checked' if on? %> />
+  <div class="swap-on" data-hw-swap-target="onContent">
+    <% if on_content %>
+      <%= safe_svg(on_content) %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+  <div class="swap-off" data-hw-swap-target="offContent">
+    <% if off_content %>
+      <%= safe_svg(off_content) %>
+    <% end %>
+  </div>
+</label>

data/app/views/hotwirebits/_switch.html.erb

@@ -0,0 +1,19 @@
+<%# Switch component — ERB partial %>
+<%# Usage: render 'hotwirebits/switch', name: "dark", label: "Dark", checked: false %>
+
+<%
+  name     = local_assigns.fetch(:name, "")
+  label    = local_assigns[:label]
+  checked  = local_assigns.fetch(:checked, false)
+  disabled = local_assigns.fetch(:disabled, false)
+%>
+
+<label class="flex items-center gap-2 cursor-pointer" data-controller="hw-switch">
+  <input type="hidden" name="<%= name %>" value="0">
+  <button type="button" role="switch" aria-checked="<%= checked %>" <%= 'disabled' if disabled %> class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 focus-visible:ring-offset-hw-background disabled:cursor-not-allowed disabled:opacity-50 bg-hw-input <%= checked ? 'bg-hw-primary' : '' %> h-6 w-11" data-action="click->hw-switch#toggle">
+    <span class="pointer-events-none block h-5 w-5 rounded-full bg-hw-background shadow-lg ring-0 transition-transform <%= checked ? 'translate-x-5' : 'translate-x-0' %>"></span>
+  </button>
+  <% if label %>
+    <span class="text-sm font-medium"><%= label %></span>
+  <% end %>
+</label>

data/app/views/hotwirebits/_table.html.erb

@@ -0,0 +1,8 @@
+<%# Table component — ERB partial %>
+<%# Usage: render 'hotwirebits/table', ... %>
+
+<div class="relative w-full overflow-auto">
+  <table class="<%= table_classes %>" <%= tag.attributes(local_assigns) %>>
+    <%= content %>
+  </table>
+</div>

data/app/views/hotwirebits/_table_of_contents.html.erb

@@ -0,0 +1,15 @@
+<%# TableOfContents component — ERB partial %>
+<%# Usage: render 'hotwirebits/table_of_contents', ... %>
+
+<nav aria-label="Table of contents" class="space-y-0.5 text-sm" <%= tag.attributes(local_assigns) %>>
+  <% headings.each do |heading| %>
+    <a href="#<%= heading[:id] %>"
+       class="<%= merge_classes(
+         'block py-1 text-hw-muted-foreground hover:text-hw-foreground transition-colors',
+         indent_class(heading[:level]),
+         active_id == heading[:id] ? 'text-hw-foreground font-medium border-l-2 border-hw-primary pl-2' : nil
+       ) %>">
+  <%= heading[:text] %>
+</a>
+<% end %>
+</nav>