hotwirebits 0.1.0

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

@@ -0,0 +1,62 @@
+<%# ProductOverview component — ERB partial %>
+<%# Usage: render 'hotwirebits/product_overview', ... %>
+
+<div class="mx-auto max-w-7xl px-6 py-10 lg:px-8" <%= tag.attributes(local_assigns) %>>
+  <div class="grid gap-10 lg:grid-cols-2">
+    <div class="space-y-4">
+      <% if main_image %>
+        <div class="overflow-hidden rounded-xl bg-hw-muted">
+          <img src="<%= main_image[:src] %>" alt="<%= main_image[:alt] || name %>" class="w-full object-cover">
+        </div>
+      <% end %>
+      <% if images.size > 1 %>
+        <div class="flex gap-3">
+          <% images.each do |img| %>
+            <button type="button" class="h-16 w-16 overflow-hidden rounded-lg border-2 border-transparent hover:border-hw-primary">
+              <img src="<%= img[:src] %>" alt="<%= img[:alt] || name %>" class="h-full w-full object-cover">
+            </button>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <div>
+      <h1 class="text-2xl font-bold text-hw-foreground"><%= name %></h1>
+      <p class="mt-2 text-2xl font-semibold text-hw-primary"><%= price %></p>
+      <% if rating %>
+        <div class="mt-3 flex items-center gap-1">
+          <% 5.times do |i| %>
+            <svg class="h-5 w-5 <%= i < rating.to_i ? 'text-hw-warning' : 'text-hw-muted-foreground/40' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/>
+            </svg>
+          <% end %>
+          <span class="ml-1 text-sm text-hw-muted-foreground">(<%= rating %>)</span>
+        </div>
+      <% end %>
+      <% if description %>
+        <div class="mt-6 text-sm leading-relaxed text-hw-muted-foreground"><%= description %></div>
+      <% end %>
+      <% if features.any? %>
+        <ul class="mt-6 space-y-2">
+          <% features.each do |feature| %>
+            <li class="flex items-center gap-2 text-sm text-hw-foreground">
+              <svg class="h-4 w-4 text-green-500 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
+              </svg>
+              <%= feature %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+      <div class="mt-8 flex gap-3">
+        <button type="button" class="flex-1 rounded-lg bg-hw-primary px-6 py-3 text-sm font-semibold text-hw-primary-foreground transition-colors hover:bg-hw-primary/90">
+          Add to Cart
+        </button>
+        <button type="button" class="rounded-lg border border-hw-border px-4 py-3 text-sm font-medium text-hw-foreground hover:bg-hw-muted">
+          <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="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<%# ProductQuickview component — ERB partial %>
+<%# Usage: render 'hotwirebits/product_quickview', ... %>
+
+<div class="rounded-xl border border-hw-border bg-hw-card overflow-hidden shadow-lg max-w-sm"
+     data-controller="hw-quickview"
+     <%= tag.attributes(local_assigns) %>>
+  <% if image %>
+    <div class="relative aspect-square bg-hw-muted">
+      <img src="<%= image %>" alt="<%= name %>" class="h-full w-full object-cover">
+      <button type="button"
+              class="absolute top-3 right-3 h-8 w-8 inline-flex items-center justify-center rounded-full bg-hw-background/80 backdrop-blur text-hw-muted-foreground hover:bg-hw-background hover:text-hw-foreground transition-colors cursor-pointer"
+              data-action="click->hw-quickview#close"
+        aria-label="Close">
+        <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="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </div>
+  <% end %>
+  <div class="p-4 space-y-3">
+    <div class="flex items-start justify-between gap-2">
+      <h3 class="text-base font-semibold text-hw-foreground"><%= name %></h3>
+      <span class="text-lg font-bold text-hw-primary"><%= price %></span>
+    </div>
+    <% if rating %>
+      <div class="flex items-center gap-1">
+        <% 5.times do |i| %>
+          <svg class="h-4 w-4 <%= i < rating ? 'text-hw-warning' : 'text-hw-muted' %>" xmlns="http://www.w3.org/2000/svg" fill="<%= i < rating ? 'currentColor' : 'none' %>" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+          </svg>
+        <% end %>
+      </div>
+    <% end %>
+    <% if description %>
+      <p class="text-sm text-hw-muted-foreground line-clamp-2"><%= description %></p>
+    <% end %>
+    <div class="flex gap-2 pt-2">
+      <button type="button"
+              class="flex-1 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">
+        Add to Cart
+      </button>
+      <% if href %>
+        <a href="<%= href %>"
+           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">
+          Details
+        </a>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<%# Progress component — ERB partial %>
+<%# Usage: render 'hotwirebits/progress', ... %>
+
+<div <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between mb-1">
+    <% if show_label %>
+      <span class="text-sm font-medium"><%= percentage %>%</span>
+    <% end %>
+  </div>
+  <div class="<%= track_classes %>">
+    <div class="<%= bar_classes %>" style="width: <%= percentage %>%;"></div>
+  </div>
+</div>

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

@@ -0,0 +1,29 @@
+<%# ProgressRing component — ERB partial %>
+<%# Usage: render 'hotwirebits/progress_ring', ... %>
+
+<div class="relative inline-flex items-center justify-center" <%= tag.attributes(local_assigns) %>>
+  <svg width="<%= size %>" height="<%= size %>" class="-rotate-90">
+    <circle
+      cx="<%= center %>"
+      cy="<%= center %>"
+      r="<%= radius %>"
+      fill="none"
+      stroke-width="4"
+      class="stroke-hw-muted"
+    />
+    <circle
+      cx="<%= center %>"
+      cy="<%= center %>"
+      r="<%= radius %>"
+      fill="none"
+      stroke-width="4"
+      stroke-linecap="round"
+      stroke-dasharray="<%= circumference %>"
+      stroke-dashoffset="<%= stroke_dashoffset %>"
+      class="<%= color_class %> transition-all duration-300"
+    />
+  </svg>
+  <% if show_label %>
+    <span class="absolute text-sm font-medium"><%= percentage %>%</span>
+  <% end %>
+</div>

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

@@ -0,0 +1,34 @@
+<%# PromoSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/promo_section', ... %>
+
+<section class="<%= section_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto grid max-w-7xl items-center gap-8 px-6 py-16 lg:grid-cols-2 lg:gap-16 lg:px-8">
+    <div class="flex flex-col items-start gap-4">
+      <% if badge %>
+        <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-inset
+                     <%= variant == :dark || variant == :gradient ? 'ring-white/30 text-hw-primary-foreground/90' : 'ring-hw-primary/30 text-hw-primary bg-hw-primary/5' %>">
+          <%= badge %>
+        </span>
+      <% end %>
+      <h2 class="text-3xl font-bold tracking-tight sm:text-4xl"><%= title %></h2>
+      <% if description %>
+        <p class="text-lg opacity-80"><%= description %></p>
+      <% end %>
+      <% if cta %>
+        <a href="<%= cta[:href] %>"
+           class="mt-2 inline-flex items-center rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors
+                  <%= variant == :dark || variant == :gradient ? 'bg-white text-hw-foreground hover:bg-white/90' : 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' %>">
+          <%= cta[:label] %>
+          <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
+          </svg>
+        </a>
+      <% end %>
+    </div>
+    <% if image %>
+      <div class="relative">
+        <img src="<%= image %>" alt="" class="w-full rounded-xl object-cover shadow-2xl">
+      </div>
+    <% end %>
+  </div>
+</section>

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

@@ -0,0 +1,22 @@
+<%# QrCode component — ERB partial %>
+<%# Usage: render 'hotwirebits/qr_code', ... %>
+
+<% qr = modules %>
+<% cell_size = (size.to_f / (qr.size + margin * 2)).round(2) %>
+<div class="<%= merge_classes('inline-block', extra_attrs.delete(:class)) %>"
+     <%= tag.attributes(local_assigns) %>>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="<%= size %>"
+       height="<%= size %>"
+       viewBox="0 0 <%= qr.size + margin * 2 %> <%= qr.size + margin * 2 %>"
+       shape-rendering="crispEdges">
+    <rect width="<%= qr.size + margin * 2 %>" height="<%= qr.size + margin * 2 %>" fill="white"/>
+    <% qr.each_with_index do |row, r| %>
+      <% row.each_with_index do |cell, c| %>
+        <% if cell == 1 %>
+          <rect x="<%= c + margin %>" y="<%= r + margin %>" width="1" height="1" fill="black"/>
+        <% end %>
+      <% end %>
+    <% end %>
+  </svg>
+    </div>

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

@@ -0,0 +1,9 @@
+<%# Radio component — ERB partial %>
+<%# Usage: render 'hotwirebits/radio', ... %>
+
+<label class="flex items-center gap-2 cursor-pointer" <%= tag.attributes(local_assigns) %>>
+  <input type="radio" name="<%= name %>" value="<%= value %>" <%= 'checked' if checked %> <%= 'disabled' if disabled %> class="peer aspect-square shrink-0 rounded-full border border-hw-input bg-hw-background text-hw-primary 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 <%= SIZES[size] || 'h-4 w-4' %>">
+  <% if label %>
+    <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><%= label %></span>
+  <% end %>
+</label>

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

@@ -0,0 +1,12 @@
+<%# RangeSlider component — ERB partial %>
+<%# Usage: render 'hotwirebits/range_slider', ... %>
+
+<% left_pct = ((value_min - min).to_f / [max - min, 1].max) * 100 %>
+<% width_pct = ((value_max - value_min).to_f / [max - min, 1].max) * 100 %>
+<div class="relative w-full h-6" data-controller="hw-range-slider" data-hw-range-slider-min-value="<%= min %>" data-hw-range-slider-max-value="<%= max %>" <%= tag.attributes(local_assigns) %>>
+  <div class="absolute top-1/2 -translate-y-1/2 h-2 w-full rounded-full bg-hw-muted">
+    <div class="absolute h-full rounded-full bg-hw-primary" style="left: <%= left_pct %>%; width: <%= width_pct %>%" data-hw-range-slider-target="track"></div>
+  </div>
+  <input type="range" name="<%= name_min %>" value="<%= value_min %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="absolute top-0 left-0 w-full h-2 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-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 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-hw-background [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-hw-background z-10" data-action="input->hw-range-slider#min" data-hw-range-slider-target="min">
+  <input type="range" name="<%= name_max %>" value="<%= value_max %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="absolute top-0 left-0 w-full h-2 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-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 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-hw-background [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-hw-background z-20" data-action="input->hw-range-slider#max" data-hw-range-slider-target="max">
+</div>

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

@@ -0,0 +1,14 @@
+<%# Rating component — ERB partial %>
+<%# Usage: render 'hotwirebits/rating', ... %>
+
+<div class="flex items-center gap-0.5" data-controller="hw-rating">
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-rating-target="input">
+  <% max.times do |i| %>
+    <% filled = (i + 1) <= value %>
+    <button type="button" class="cursor-pointer <%= filled ? 'text-hw-warning' : 'text-hw-muted-foreground' %>" <%= 'disabled' if readonly %> data-action="<%= 'click->hw-rating#select' unless readonly %>" data-value="<%= i + 1 %>">
+      <svg class="<%= SIZES[size] || 'h-5 w-5' %>" fill="<%= filled ? 'currentColor' : 'none' %>" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,22 @@
+<%# Resizable component — ERB partial %>
+<%# Usage: render 'hotwirebits/resizable', ... %>
+
+<div data-controller="hw-resizable" class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if direction == :horizontal %>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel1">
+      <%= left %>
+    </div>
+    <div class="<%= handle_classes %>" data-hw-resizable-target="handle" data-action="pointerdown->hw-resizable#startResize"></div>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel2">
+      <%= right %>
+    </div>
+  <% else %>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel1">
+      <%= top %>
+    </div>
+    <div class="<%= handle_classes %>" data-hw-resizable-target="handle" data-action="pointerdown->hw-resizable#startResize"></div>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel2">
+      <%= bottom %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,39 @@
+<%# Review component — ERB partial %>
+<%# Usage: render 'hotwirebits/review', ... %>
+
+<article class="border-b border-hw-border pb-6 last:border-0" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-start gap-4">
+    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-hw-muted text-sm font-semibold text-hw-muted-foreground">
+      <%= initials %>
+    </div>
+    <div class="min-w-0 flex-1">
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="text-sm font-semibold text-hw-foreground"><%= author %></span>
+        <% if verified %>
+          <span class="inline-flex items-center gap-1 rounded-full bg-hw-success/5 px-2 py-0.5 text-xs font-medium text-hw-success ring-1 ring-inset ring-green-600/20">
+            <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
+            </svg>
+            Verified
+          </span>
+        <% end %>
+      </div>
+      <div class="mt-1 flex items-center gap-2">
+        <div class="flex items-center">
+          <% 5.times do |i| %>
+            <svg class="h-4 w-4 <%= i < rating ? 'text-hw-warning' : 'text-hw-muted-foreground/40' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/>
+            </svg>
+          <% end %>
+        </div>
+        <% if date %>
+          <time class="text-xs text-hw-muted-foreground"><%= date %></time>
+        <% end %>
+      </div>
+      <% if title %>
+        <h4 class="mt-2 text-sm font-semibold text-hw-foreground"><%= title %></h4>
+      <% end %>
+      <p class="mt-1.5 text-sm leading-relaxed text-hw-muted-foreground"><%= content %></p>
+    </div>
+  </div>
+</article>

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

@@ -0,0 +1,58 @@
+<%# RichTextEditor component — ERB partial %>
+<%# Usage: render 'hotwirebits/rich_text_editor', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-background overflow-hidden"
+     data-controller="hw-rich-text-editor"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex flex-wrap items-center gap-0.5 border-b border-hw-border bg-hw-muted/50 px-2 py-1.5">
+    <% toolbar.each do |btn| %>
+      <% case btn %>
+      <% when 'bold' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#bold" title="Bold">
+          <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.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6z"/><path stroke-linecap="round" stroke-linejoin="round" d="M6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"/></svg>
+        </button>
+      <% when 'italic' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#italic" title="Italic">
+          <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="M10 4h4m-2 0l-4 16m0 0h4"/></svg>
+        </button>
+      <% when 'underline' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#underline" title="Underline">
+          <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="M7 4v7a5 5 0 0010 0V4M5 21h14"/></svg>
+        </button>
+      <% when 'strikethrough' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#strikethrough" title="Strikethrough">
+          <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="M16 4H9a3 3 0 00-3 3v0a3 3 0 003 3h6a3 3 0 013 3v0a3 3 0 01-3 3H8M4 12h16"/></svg>
+        </button>
+      <% when 'link' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#link" title="Link">
+          <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="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
+        </button>
+      <% when 'bullet_list' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#bulletList" title="Bullet List">
+          <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="M4 6h16M4 12h16M4 18h16"/></svg>
+        </button>
+      <% when 'ordered_list' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#orderedList" title="Ordered List">
+          <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="M7 6h13M7 12h13M7 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
+        </button>
+      <% when 'heading' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#heading" title="Heading">
+          <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="M7 4v16M17 4v16M7 12h10"/></svg>
+        </button>
+      <% when 'quote' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#quote" title="Quote">
+          <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/></svg>
+        </button>
+      <% when 'code' %>
+        <button type="button" class="h-8 w-8 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground hover:text-hw-accent-foreground cursor-pointer" data-action="click->hw-rich-text-editor#code" title="Code">
+          <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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
+        </button>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="min-h-[200px] p-4 text-sm text-hw-foreground focus:outline-none"
+       contenteditable="true"
+       data-hw-rich-text-editor-target="content"
+       data-placeholder="<%= placeholder %>"><%= value %></div>
+  <input type="hidden" name="<%= name %>" data-hw-rich-text-editor-target="input" value="<%= value %>">
+</div>

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

@@ -0,0 +1,6 @@
+<%# ScrollArea component — ERB partial %>
+<%# Usage: render 'hotwirebits/scroll_area', ... %>
+
+<div class="<%= scroll_classes %>" <% if scroll_styles %>style="<%= scroll_styles %>"<% end %> <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</div>

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

@@ -0,0 +1,59 @@
+<%# Search component — ERB partial %>
+<%# Usage: render 'hotwirebits/search', ... %>
+
+<div class="<%= container_classes %>"
+     data-controller="hw-search"
+     data-hw-search-suggestions-value="<%= suggestions.to_json %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="relative">
+    <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="11" cy="11" r="8"/><path stroke-linecap="round" d="M21 21l-4.35-4.35"/>
+    </svg>
+    <input type="search"
+           name="<%= name %>"
+           value="<%= value %>"
+           placeholder="<%= placeholder %>"
+           class="w-full h-10 rounded-lg border border-hw-border bg-hw-background pl-10 pr-4 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring focus:border-transparent"
+           data-hw-search-target="input"
+           data-action="input->hw-search#debounce focus->hw-search#showSuggestions blur->hw-search#hideSuggestions">
+    <% if with_filters %>
+      <button type="button"
+              class="absolute right-2 top-1/2 -translate-y-1/2 h-7 w-7 rounded-md flex items-center justify-center hover:bg-hw-muted transition-colors"
+              data-action="click->hw-search#toggleFilters">
+        <svg class="h-4 w-4 text-hw-muted-foreground" 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/>
+        </svg>
+        <span class="sr-only">Filters</span>
+      </button>
+    <% end %>
+  </div>
+  <div class="hidden absolute top-full left-0 right-0 mt-1 rounded-lg border border-hw-border bg-hw-popover shadow-lg z-50"
+       data-hw-search-target="suggestions">
+    <ul class="py-1 max-h-60 overflow-auto" data-hw-search-target="list">
+      <% suggestions.each do |suggestion| %>
+        <li>
+          <button type="button"
+                  class="w-full px-3 py-2 text-left text-sm hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors"
+                  data-action="click->hw-search#select"
+            data-value="<%= suggestion.is_a?(Hash) ? suggestion[:value] : suggestion %>">
+            <% if suggestion.is_a?(Hash) %>
+              <span class="font-medium"><%= suggestion[:label] %></span>
+              <% if suggestion[:description] %>
+                <span class="ml-2 text-xs text-hw-muted-foreground"><%= suggestion[:description] %></span>
+              <% end %>
+            <% else %>
+              <%= suggestion %>
+            <% end %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <% if with_filters %>
+    <div class="hidden mt-2 rounded-lg border border-hw-border bg-hw-card p-3" data-hw-search-target="filters">
+      <p class="text-xs font-medium text-hw-muted-foreground mb-2">Filters</p>
+      <div class="flex flex-wrap gap-2" data-hw-search-target="filterContainer">
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,9 @@
+<%# SearchInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/search_input', ... %>
+
+<div class="relative">
+  <div class="absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground">
+    <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+  </div>
+  <input type="search" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" <%= 'disabled' if disabled %> class="<%= input_classes %>" <%= tag.attributes(local_assigns) %>>
+</div>

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

@@ -0,0 +1,9 @@
+<%# SectionHeading component — ERB partial %>
+<%# Usage: render 'hotwirebits/section_heading', ... %>
+
+<div class="flex flex-col gap-1 <%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <h2 class="text-xl font-semibold text-hw-foreground"><%= title %></h2>
+  <% if description %>
+    <p class="text-sm text-hw-muted-foreground"><%= description %></p>
+  <% end %>
+</div>

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

@@ -0,0 +1,30 @@
+<%# Select component — ERB partial %>
+<%# Usage: render 'hotwirebits/select', name: "country", options: [["US","us"]], placeholder: "Choose" %>
+
+<%
+  name        = local_assigns.fetch(:name, "")
+  options     = local_assigns.fetch(:options, [])
+  placeholder = local_assigns.fetch(:placeholder, "Select...")
+  selected    = local_assigns[:selected]
+  disabled    = local_assigns.fetch(:disabled, false)
+  multiple    = local_assigns.fetch(:multiple, false)
+
+  select_cls = "flex h-10 w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm ring-offset-hw-background focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+%>
+
+<select name="<%= name %>" <%= 'disabled' if disabled %> <%= 'multiple' if multiple %> class="<%= select_cls %>">
+  <option value="" disabled <%= 'selected' unless selected %>><%= placeholder %></option>
+  <% options.each do |opt| %>
+    <% if opt.is_a?(Array) %>
+      <option value="<%= opt.last %>" <%= 'selected' if Array(selected).include?(opt.last) %>><%= opt.first %></option>
+    <% elsif opt.is_a?(Hash) %>
+      <optgroup label="<%= opt[:label] %>">
+        <% opt[:options].each do |o| %>
+          <option value="<%= o.last %>" <%= 'selected' if Array(selected).include?(o.last) %>><%= o.first %></option>
+        <% end %>
+      </optgroup>
+    <% else %>
+      <option value="<%= opt %>" <%= 'selected' if Array(selected).include?(opt) %>><%= opt %></option>
+    <% end %>
+  <% end %>
+</select>

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

@@ -0,0 +1,12 @@
+<%# SemiCircleProgress component — ERB partial %>
+<%# Usage: render 'hotwirebits/semi_circle_progress', ... %>
+
+<div class="relative inline-flex items-center justify-center" <%= tag.attributes(local_assigns) %>>
+  <svg width="<%= size %>" height="<%= size / 2 + 8 %>" viewBox="0 0 <%= size %> <%= size / 2 + 8 %>">
+    <path d="M <%= center_x - radius %> <%= center_y %> A <%= radius %> <%= radius %> 0 0 1 <%= center_x + radius %> <%= center_y %>" fill="none" stroke-width="8" class="stroke-hw-muted" stroke-linecap="round"/>
+    <path d="M <%= center_x - radius %> <%= center_y %> A <%= radius %> <%= radius %> 0 0 1 <%= center_x + radius %> <%= center_y %>" fill="none" stroke-width="8" class="<%= color_class %> transition-all duration-300" stroke-linecap="round" stroke-dasharray="<%= circumference %>" stroke-dashoffset="<%= stroke_dashoffset %>"/>
+  </svg>
+  <% if show_label %>
+    <span class="absolute bottom-0 text-sm font-medium"><%= percentage %>%</span>
+  <% end %>
+</div>

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

@@ -0,0 +1,18 @@
+<%# Separator component — ERB partial %>
+<%# Usage: render 'hotwirebits/separator', orientation: :horizontal %>
+
+<%
+  orientation = local_assigns.fetch(:orientation, :horizontal)
+  label       = local_assigns[:label]
+  decorative  = local_assigns.fetch(:decorative, true)
+%>
+
+<% if label %>
+  <div class="relative flex items-center" role="none">
+    <div class="shrink-0 bg-hw-border h-[1px] w-full"></div>
+    <span class="px-2 text-xs text-hw-muted-foreground font-medium"><%= label %></span>
+    <div class="shrink-0 bg-hw-border h-[1px] w-full"></div>
+  </div>
+<% else %>
+  <div class="<%= orientation == :vertical ? 'shrink-0 bg-hw-border h-full w-[1px]' : 'shrink-0 bg-hw-border h-[1px] w-full' %>" role="<%= decorative ? 'none' : 'separator' %>"></div>
+<% end %>

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

@@ -0,0 +1,45 @@
+<%# Sheet component — ERB partial %>
+<%# Usage: render 'hotwirebits/sheet', ... %>
+
+<div data-controller="hw-dialog"
+     data-hw-dialog-open-value="<%= open %>">
+  <div class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       data-action="click->hw-dialog#close"
+    aria-hidden="true"></div>
+  <div class="fixed z-50 gap-4 bg-hw-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 <%= side_config[:panel] %>"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="dialog"
+       aria-modal="true"
+       <%= tag.attributes(local_assigns) %>>
+    <div class="flex flex-col space-y-2">
+      <% if header? %>
+        <%= header %>
+      <% elsif title %>
+        <div class="flex items-center justify-between">
+          <h2 class="text-lg font-semibold tracking-tight"><%= title %></h2>
+          <% if closable %>
+            <button type="button"
+                    class="rounded-sm opacity-70 ring-offset-hw-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2"
+                    data-action="click->hw-dialog#close">
+              <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="M6 18L18 6M6 6l12 12"/>
+              </svg>
+              <span class="sr-only">Close</span>
+            </button>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <div class="py-4 text-sm">
+      <%= content %>
+    </div>
+    <% if footer? %>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <%= footer %>
+      </div>
+    <% end %>
+  </div>
+</div>