hotwirebits 0.1.0

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

@@ -0,0 +1,59 @@
+<%# Button component — ERB partial %>
+<%# Usage: render 'hotwirebits/button', label: "Click", variant: :default, size: :md %>
+
+<%
+  label    = local_assigns.fetch(:label, "Button")
+  variant  = local_assigns.fetch(:variant, :default)
+  size     = local_assigns.fetch(:size, :md)
+  type     = local_assigns.fetch(:type, "button")
+  href     = local_assigns[:href]
+  loading  = local_assigns.fetch(:loading, false)
+  disabled = local_assigns.fetch(:disabled, false)
+  icon     = local_assigns[:icon]
+
+  size_classes = case size
+                 when :xs then "h-7 px-2 text-xs"
+                 when :sm then "h-8 px-3 text-xs"
+                 when :lg then "h-11 px-8 text-base"
+                 when :xl then "h-12 px-10 text-lg"
+                 else "h-9 px-4 py-2 text-sm"
+                 end
+  variant_classes = case variant
+                    when :destructive then "bg-hw-destructive text-hw-destructive-foreground hover:bg-hw-destructive/90"
+                    when :outline then "border border-hw-input bg-hw-background hover:bg-hw-accent hover:text-hw-accent-foreground"
+                    when :secondary then "bg-hw-secondary text-hw-secondary-foreground hover:bg-hw-secondary/80"
+                    when :ghost then "hover:bg-hw-accent hover:text-hw-accent-foreground"
+                    when :link then "text-hw-primary underline-offset-4 hover:underline"
+                    else "bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90"
+                    end
+  base = "inline-flex items-center justify-center rounded-md font-medium ring-offset-hw-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer"
+  btn_class = [base, variant_classes, size_classes].join(" ")
+%>
+
+<% if href %>
+  <a href="<%= href %>" class="<%= btn_class %>">
+    <% if icon %>
+      <span class="mr-1"><%= icon %></span>
+    <% end %>
+    <% if loading %>
+      <svg class="mr-1 h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+    <% end %>
+    <%= label %>
+  </a>
+<% else %>
+  <button type="<%= type %>" class="<%= btn_class %>" <%= 'disabled' if disabled %>>
+    <% if icon %>
+      <span class="mr-1"><%= icon %></span>
+    <% end %>
+    <% if loading %>
+      <svg class="mr-1 h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+      </svg>
+    <% end %>
+    <%= label %>
+  </button>
+<% end %>

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

@@ -0,0 +1,73 @@
+<%# Calendar component — ERB partial %>
+<%# Usage: render 'hotwirebits/calendar', ... %>
+
+<div class="<%= container_classes %>"
+     data-controller="hw-calendar"
+     data-hw-calendar-month-value="<%= month %>"
+     data-hw-calendar-year-value="<%= year %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between mb-4">
+    <button type="button"
+            class="h-8 w-8 rounded-md flex items-center justify-center hover:bg-hw-muted transition-colors"
+            data-action="click->hw-calendar#prev">
+      <svg class="h-4 w-4" 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="M15 19l-7-7 7-7"/></svg>
+      <span class="sr-only">Previous month</span>
+    </button>
+    <h2 class="text-sm font-semibold text-hw-foreground" data-hw-calendar-target="label">
+      <%= month_name %> <%= year %>
+    </h2>
+    <button type="button"
+            class="h-8 w-8 rounded-md flex items-center justify-center hover:bg-hw-muted transition-colors"
+            data-action="click->hw-calendar#next">
+      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+      <span class="sr-only">Next month</span>
+    </button>
+  </div>
+  <div class="grid grid-cols-7 gap-px text-center text-xs font-medium text-hw-muted-foreground mb-1">
+    <% %w[Su Mo Tu We Th Fr Sa].each do |day_name| %>
+      <div class="py-1"><%= day_name %></div>
+    <% end %>
+  </div>
+  <div class="grid grid-cols-7 gap-px" data-hw-calendar-target="grid">
+    <% start_wday.times do %>
+      <div></div>
+    <% end %>
+    <% (1..days_in_month).each do |day| %>
+      <% day_events = events_for(day) %>
+      <button type="button"
+              class="relative h-9 rounded-md text-sm transition-colors hover:bg-hw-muted flex flex-col items-center justify-center
+                     <%= if selected?(day)
+                           'bg-hw-primary text-hw-primary-foreground'
+                         elsif today?(day)
+                           'bg-hw-accent text-hw-accent-foreground font-semibold'
+                         else
+                           'text-hw-foreground'
+                         end %>"
+              data-action="click->hw-calendar#select"
+        data-day="<%= day %>">
+        <%= day %>
+        <% if day_events.any? %>
+          <div class="absolute bottom-1 flex gap-0.5">
+            <% day_events.first(3).each do |ev| %>
+              <span class="h-1 w-1 rounded-full" style="background-color: <%= ev[:color] || '#3b82f6' %>"></span>
+            <% end %>
+          </div>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+  <% if events.any? %>
+    <% today_events = events_for(Date.today.day) if month == Date.today.month && year == Date.today.year %>
+    <% if today_events&.any? %>
+      <div class="mt-4 border-t border-hw-border pt-3 space-y-2">
+        <p class="text-xs font-medium text-hw-muted-foreground">Today</p>
+        <% today_events.each do |ev| %>
+          <div class="flex items-center gap-2 text-sm">
+            <span class="h-2 w-2 rounded-full shrink-0" style="background-color: <%= ev[:color] || '#3b82f6' %>"></span>
+            <span class="text-hw-foreground"><%= ev[:title] %></span>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,23 @@
+<%# Card component — ERB partial %>
+<%# Usage: render 'hotwirebits/card', title: "Card Title", description: "Description" %>
+
+<%
+  title       = local_assigns[:title]
+  description = local_assigns[:description]
+  extra_class = local_assigns[:class]
+  card_cls    = ["rounded-lg border border-hw-border bg-hw-card text-hw-card-foreground shadow-sm", extra_class].compact.join(" ")
+%>
+
+<div class="<%= card_cls %>">
+  <% if title %>
+    <div class="flex flex-col space-y-1.5 p-6">
+      <h3 class="text-lg font-semibold leading-none tracking-tight"><%= title %></h3>
+      <% if description %>
+        <p class="text-sm text-hw-muted-foreground"><%= description %></p>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="p-6 pt-0">
+    <% if block_given? %><%= yield %><% end %>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+<%# CardHeading component — ERB partial %>
+<%# Usage: render 'hotwirebits/card_heading', ... %>
+
+<div class="flex items-start justify-between gap-4" <%= tag.attributes(local_assigns) %>>
+  <div>
+    <h3 class="text-base font-semibold text-hw-foreground"><%= title %></h3>
+    <% if subtitle %>
+      <p class="mt-0.5 text-sm text-hw-muted-foreground"><%= subtitle %></p>
+    <% end %>
+  </div>
+  <% if action_label && action_href %>
+    <a href="<%= action_href %>" class="text-sm font-medium text-hw-primary hover:text-hw-primary/80 transition-colors shrink-0">
+      <%= action_label %>
+    </a>
+  <% end %>
+</div>

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

@@ -0,0 +1,53 @@
+<%# Carousel component — ERB partial %>
+<%# Usage: render 'hotwirebits/carousel', ... %>
+
+<div class="<%= container_classes %>"
+     data-controller="hw-carousel"
+     data-hw-carousel-autoplay-value="<%= autoplay %>"
+     data-hw-carousel-interval-value="<%= interval %>"
+     <%= tag.attributes(local_assigns) %>>
+  <div class="flex transition-transform duration-300 ease-in-out"
+       data-hw-carousel-target="track">
+    <% all_slides.each do |slide| %>
+      <div class="w-full shrink-0" data-hw-carousel-target="slide">
+        <% if slides? %>
+          <%= slide %>
+        <% else %>
+          <% if slide.is_a?(Hash) && slide[:image] %>
+            <img src="<%= slide[:image] %>" alt="<%= slide[:alt] || '' %>" class="w-full h-full object-cover">
+          <% else %>
+            <%= slide.is_a?(Hash) ? slide[:content] : slide %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <% if show_arrows %>
+    <button type="button"
+            class="absolute left-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-hw-background/80 border border-hw-border flex items-center justify-center shadow-sm hover:bg-hw-background transition-colors"
+            data-action="click->hw-carousel#prev">
+      <svg class="h-4 w-4" 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="M15 19l-7-7 7-7"/></svg>
+      <span class="sr-only">Previous</span>
+    </button>
+    <button type="button"
+            class="absolute right-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-hw-background/80 border border-hw-border flex items-center justify-center shadow-sm hover:bg-hw-background transition-colors"
+            data-action="click->hw-carousel#next">
+      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+      <span class="sr-only">Next</span>
+    </button>
+  <% end %>
+  <% if show_dots %>
+    <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" data-hw-carousel-target="dots">
+      <% all_slides.each_with_index do |_, i| %>
+        <button type="button"
+                class="h-2 w-2 rounded-full bg-hw-background/60 data-[active]:bg-hw-primary transition-colors"
+                data-action="click->hw-carousel#goTo"
+          data-index="<%= i %>"
+          data-hw-carousel-target="dot"
+          <%= 'data-active' if i == 0 %>>
+          <span class="sr-only">Slide <%= i + 1 %></span>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

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

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

@@ -0,0 +1,71 @@
+<%# Chart component — ERB partial %>
+<%# Usage: render 'hotwirebits/chart', ... %>
+
+<div class="<%= container_classes %>" style="height: <%= height %>px" <%= tag.attributes(local_assigns) %>>
+  <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
+    <% case type %>
+    <% when :line %>
+      <% data.each_with_index do |d, i| %>
+        <% x = (i * (100.0 / ([data.size - 1, 1].max))).round(2) %>
+        <% y = max_value.zero? ? 50 : (50 - (d[:value].to_f / max_value * 48)).round(2) %>
+        <circle cx="<%= x %>" cy="<%= y %>" r="1" fill="var(--hw-primary, #3b82f6)"/>
+      <% end %>
+      <polyline fill="none" stroke="var(--hw-primary, #3b82f6)" stroke-width="0.5" points="<%= line_points %>"/>
+
+    <% when :area %>
+      <polygon fill="var(--hw-primary, #3b82f6)" opacity="0.15" points="<%= area_points %>"/>
+      <polyline fill="none" stroke="var(--hw-primary, #3b82f6)" stroke-width="0.5" points="<%= line_points %>"/>
+      <% data.each_with_index do |d, i| %>
+        <% x = (i * (100.0 / ([data.size - 1, 1].max))).round(2) %>
+        <% y = max_value.zero? ? 50 : (50 - (d[:value].to_f / max_value * 48)).round(2) %>
+        <circle cx="<%= x %>" cy="<%= y %>" r="1" fill="var(--hw-primary, #3b82f6)"/>
+      <% end %>
+
+    <% when :bar %>
+      <% data.each_with_index do |d, i| %>
+        <% bw = bar_width %>
+        <% x = (i * (100.0 / data.size) + bar_gap).round(2) %>
+        <% h = max_value.zero? ? 0 : (d[:value].to_f / max_value * 48).round(2) %>
+        <% y = (50 - h).round(2) %>
+        <rect x="<%= x %>" y="<%= y %>" width="<%= bw %>" height="<%= h %>" rx="1"
+              fill="<%= d[:color] || 'var(--hw-primary, #3b82f6)' %>" opacity="0.85"/>
+        <% if show_values %>
+          <text x="<%= (x + bw / 2).round(2) %>" y="<%= (y - 1.5).round(2) %>"
+                text-anchor="middle" font-size="2.5" fill="var(--hw-foreground, #111)">
+          <%= d[:value] %>
+        </text>
+      <% end %>
+    <% end %>
+  <% when :pie, :donut %>
+    <% cx, cy, r = 50, 30, type == :donut ? 18 : 24 %>
+    <% inner = type == :donut ? 10 : 0 %>
+    <% total = sum_values %>
+    <% angle = -90 %>
+    <% colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#f97316'] %>
+    <% data.each_with_index do |d, i| %>
+      <% pct = total.zero? ? 0 : (d[:value].to_f / total * 360) %>
+      <% start_angle = angle %>
+      <% end_angle = angle + pct %>
+      <% angle = end_angle %>
+      <% start_rad = start_angle * Math::PI / 180 %>
+      <% end_rad = end_angle * Math::PI / 180 %>
+      <% x1 = (cx + r * Math.cos(start_rad)).round(2) %>
+      <% y1 = (cy + r * Math.sin(start_rad)).round(2) %>
+      <% x2 = (cx + r * Math.cos(end_rad)).round(2) %>
+      <% y2 = (cy + r * Math.sin(end_rad)).round(2) %>
+      <% large = pct > 180 ? 1 : 0 %>
+      <% if type == :donut %>
+        <% ix1 = (cx + inner * Math.cos(start_rad)).round(2) %>
+        <% iy1 = (cy + inner * Math.sin(start_rad)).round(2) %>
+        <% ix2 = (cx + inner * Math.cos(end_rad)).round(2) %>
+        <% iy2 = (cy + inner * Math.sin(end_rad)).round(2) %>
+        <path d="M<%= x1 %>,<%= y1 %> A<%= r %>,<%= r %> 0 <%= large %> 1 <%= x2 %>,<%= y2 %> L<%= ix2 %>,<%= iy2 %> A<%= inner %>,<%= inner %> 0 <%= large %> 0 <%= ix1 %>,<%= iy1 %> Z"
+                fill="<%= d[:color] || colors[i % colors.size] %>"/>
+        <% else %>
+          <path d="M<%= cx %>,<%= cy %> L<%= x1 %>,<%= y1 %> A<%= r %>,<%= r %> 0 <%= large %> 1 <%= x2 %>,<%= y2 %> Z"
+                fill="<%= d[:color] || colors[i % colors.size] %>"/>
+        <% end %>
+      <% end %>
+    <% end %>
+  </svg>
+        </div>

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

@@ -0,0 +1,30 @@
+<%# ChatBubble component — ERB partial %>
+<%# Usage: render 'hotwirebits/chat_bubble', ... %>
+
+<div class="<%= wrapper_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if avatar %>
+    <div class="shrink-0 mt-1">
+      <img src="<%= avatar %>" alt="<%= sender || '' %>" class="h-8 w-8 rounded-full object-cover">
+    </div>
+  <% end %>
+  <div class="flex flex-col gap-1">
+    <% if sender %>
+      <span class="text-xs font-medium text-hw-muted-foreground px-1 <%= 'text-right' if sent? %>"><%= sender %></span>
+    <% end %>
+    <div class="<%= bubble_classes %>">
+      <%= message %>
+    </div>
+    <div class="flex items-center gap-2 px-1 <%= 'justify-end' if sent? %>">
+      <% if time %>
+        <span class="text-xs text-hw-muted-foreground"><%= time %></span>
+      <% end %>
+      <% if actions? %>
+        <div class="flex items-center gap-1">
+          <% actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<%# Checkbox component — ERB partial %>
+<%# Usage: render 'hotwirebits/checkbox', name: "agree", label: "I agree", checked: false %>
+
+<%
+  name          = local_assigns.fetch(:name, "")
+  label         = local_assigns[:label]
+  checked       = local_assigns.fetch(:checked, false)
+  disabled      = local_assigns.fetch(:disabled, false)
+  indeterminate = local_assigns.fetch(:indeterminate, false)
+  value         = local_assigns.fetch(:value, "1")
+  size          = local_assigns.fetch(:size, :md)
+
+  size_cls = case size
+             when :sm then "h-3.5 w-3.5"
+             when :lg then "h-5 w-5"
+             else "h-4 w-4"
+             end
+%>
+
+<label class="flex items-center gap-2 cursor-pointer">
+  <input type="checkbox" name="<%= name %>" value="<%= value %>" <%= 'checked' if checked || indeterminate %> <%= 'disabled' if disabled %> class="peer shrink-0 rounded-sm border border-hw-input bg-hw-background 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 checked:bg-hw-primary checked:border-hw-primary <%= size_cls %>">
+  <% if label %>
+    <span class="font-medium leading-none text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><%= label %></span>
+  <% end %>
+</label>

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

@@ -0,0 +1,43 @@
+<%# CheckoutForm component — ERB partial %>
+<%# Usage: render 'hotwirebits/checkout_form', ... %>
+
+<div class="mx-auto max-w-3xl" <%= tag.attributes(local_assigns) %>>
+  <nav aria-label="Progress" class="mb-10">
+    <ol class="flex items-center">
+      <% steps.each_with_index do |step, index| %>
+        <li class="<%= 'flex-1' unless index == steps.size - 1 %> flex items-center">
+          <div class="flex items-center gap-2">
+            <% case step_status(index)
+               when :complete %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-hw-primary text-hw-primary-foreground">
+                <svg class="h-4 w-4" 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>
+              </div>
+              <span class="text-sm font-medium text-hw-foreground"><%= step[:label] %></span>
+            <% when :current %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-hw-primary text-sm font-semibold text-hw-primary">
+                <%= index + 1 %>
+              </div>
+              <span class="text-sm font-semibold text-hw-primary"><%= step[:label] %></span>
+            <% when :upcoming %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-hw-border text-sm text-hw-muted-foreground">
+                <%= index + 1 %>
+              </div>
+              <span class="text-sm text-hw-muted-foreground"><%= step[:label] %></span>
+            <% end %>
+          </div>
+          <% unless index == steps.size - 1 %>
+            <div class="mx-4 h-px flex-1 <%= step_status(index) == :complete ? 'bg-hw-primary' : 'bg-hw-border' %>"></div>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+  <div class="rounded-xl border border-hw-border bg-white p-6 shadow-sm">
+    <h2 class="mb-6 text-lg font-semibold text-hw-foreground"><%= steps[current_step]&.dig(:label) %></h2>
+    <div class="text-sm text-hw-muted-foreground">
+      <%= content %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,30 @@
+<%# Chip component — ERB partial %>
+<%# Usage: render 'hotwirebits/chip', label: "React", size: :md %>
+
+<%
+  label     = local_assigns.fetch(:label, "")
+  size      = local_assigns.fetch(:size, :md)
+  avatar    = local_assigns[:avatar]
+  removable = local_assigns.fetch(:removable, false)
+
+  size_cls = case size
+             when :sm then "h-6 text-xs px-2"
+             when :lg then "h-9 text-sm px-4"
+             else "h-7 text-xs px-3"
+             end
+  chip_cls = "inline-flex items-center rounded-full border border-hw-border bg-hw-background font-medium #{size_cls}"
+%>
+
+<div class="<%= chip_cls %>">
+  <% if avatar %>
+    <img src="<%= avatar %>" class="h-5 w-5 rounded-full" alt="">
+  <% end %>
+  <%= label %>
+  <% if removable %>
+    <button type="button" class="ml-0.5 -mr-1 h-4 w-4 rounded-full hover:bg-hw-muted p-0.5 focus:outline-none">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-3 w-3">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

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

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

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

@@ -0,0 +1,6 @@
+<%# CloseButton component — ERB partial %>
+<%# Usage: render 'hotwirebits/close_button', ... %>
+
+<button type="button" aria-label="<%= label %>" <%= 'disabled' if disabled %> class="<%= button_classes %>" <%= tag.attributes(local_assigns) %>>
+  <svg class="<%= icon_classes %>" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+</button>

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+<%# ColorSwatch component — ERB partial %>
+<%# Usage: render 'hotwirebits/color_swatch', ... %>
+
+<span class="inline-block rounded-full border border-hw-border cursor-pointer <%= SIZES[size] || 'h-7 w-7' %>" style="background-color: <%= color %>" <%= with_tooltip ? "title='#{color}'" : '' %> <%= tag.attributes(local_assigns) %>></span>

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

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