hotwirebits 0.1.0

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

@@ -0,0 +1,46 @@
+<%# NavigationMenu component — ERB partial %>
+<%# Usage: render 'hotwirebits/navigation_menu', ... %>
+
+<nav class="relative" data-controller="hw-nav-menu" <%= tag.attributes(local_assigns) %>>
+  <ul class="flex items-center gap-1">
+    <% items.each_with_index do |item, idx| %>
+      <li class="relative"
+          data-action="mouseenter->hw-nav-menu#open mouseleave->hw-nav-menu#close"
+  data-hw-nav-menu-index="<%= idx %>">
+  <a href="<%= item[:href] %>"
+           class="<%= merge_classes(
+             'inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+             'text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground'
+           ) %>">
+    <%= item[:label] %>
+    <% if item[:children]&.any? %>
+      <svg class="h-4 w-4 transition-transform" 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>
+    <% end %>
+  </a>
+  <% if item[:children]&.any? %>
+    <div data-hw-nav-menu-target="panel"
+               class="absolute left-0 top-full hidden pt-2">
+      <div class="w-[400px] rounded-lg border border-hw-border bg-hw-popover p-4 shadow-lg">
+        <div class="grid gap-1">
+          <% item[:children].each do |child| %>
+            <a href="<%= child[:href] %>"
+                     class="group flex items-start gap-3 rounded-md p-3 transition-colors hover:bg-hw-accent">
+              <% if child[:icon] %>
+                <span class="mt-0.5 h-5 w-5 shrink-0 text-hw-muted-foreground group-hover:text-hw-accent-foreground"><%= safe_svg(child[:icon]) %></span>
+              <% end %>
+              <div>
+                <div class="text-sm font-medium text-hw-foreground"><%= child[:label] %></div>
+                <% if child[:description] %>
+                  <div class="mt-0.5 text-sm text-hw-muted-foreground"><%= child[:description] %></div>
+                <% end %>
+              </div>
+            </a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</li>
+<% end %>
+</ul>
+</nav>

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

@@ -0,0 +1,21 @@
+<%# NewsletterSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/newsletter_section', ... %>
+
+<section class="rounded-2xl bg-hw-muted px-6 py-12 text-center lg:px-8" <%= tag.attributes(local_assigns) %>>
+  <h2 class="text-2xl font-bold tracking-tight text-hw-foreground"><%= title %></h2>
+  <% if description %>
+    <p class="mx-auto mt-3 max-w-md text-sm text-hw-muted-foreground"><%= description %></p>
+  <% end %>
+  <form class="mx-auto mt-6 flex max-w-md gap-2" data-controller="hw-newsletter">
+    <input type="email" required
+           placeholder="<%= placeholder %>"
+           class="min-w-0 flex-1 rounded-lg border border-hw-border bg-white px-4 py-2.5 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:border-hw-primary focus:outline-none focus:ring-2 focus:ring-hw-primary/20">
+    <button type="submit"
+            class="shrink-0 rounded-lg bg-hw-primary px-5 py-2.5 text-sm font-semibold text-hw-primary-foreground transition-colors hover:bg-hw-primary/90 focus:outline-none focus:ring-2 focus:ring-hw-ring">
+      <%= button_label %>
+    </button>
+  </form>
+  <% if privacy_note %>
+    <p class="mx-auto mt-3 max-w-md text-xs text-hw-muted-foreground"><%= privacy_note %></p>
+  <% end %>
+</section>

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

@@ -0,0 +1,31 @@
+<%# Notification component — ERB partial %>
+<%# Usage: render 'hotwirebits/notification', ... %>
+
+<div class="<%= notification_classes %>" data-controller="hw-notification" <%= tag.attributes(local_assigns) %>>
+  <% if icon %>
+    <div class="shrink-0 text-hw-muted-foreground">
+      <%= safe_svg(icon) %>
+    </div>
+  <% end %>
+  <div class="flex-1 space-y-1">
+    <% if title %>
+      <div class="text-sm font-medium leading-none"><%= title %></div>
+    <% end %>
+    <% if message %>
+      <p class="text-sm text-hw-muted-foreground"><%= message %></p>
+    <% end %>
+    <% if time %>
+      <time class="text-xs text-hw-muted-foreground"><%= time %></time>
+    <% end %>
+  </div>
+  <% if closable %>
+    <button type="button"
+            class="shrink-0 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-notification#dismiss">
+      <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">Dismiss</span>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,21 @@
+<%# NotificationBell component — ERB partial %>
+<%# Usage: render 'hotwirebits/notification_bell', ... %>
+
+<% if href %>
+  <a href="<%= href %>" class="relative inline-flex items-center justify-center rounded-full p-2 text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors" <%= tag.attributes(local_assigns) %>>
+<% else %>
+  <div class="relative inline-flex items-center justify-center rounded-full p-2 text-hw-muted-foreground" <%= tag.attributes(local_assigns) %>>
+<% end %>
+  <svg class="<%= icon_size %>" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+  </svg>
+  <% if count > 0 %>
+    <span class="absolute -top-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-hw-destructive text-[10px] font-bold text-hw-destructive-foreground">
+      <%= count > 99 ? '99+' : count %>
+    </span>
+  <% end %>
+  <% if href %>
+  </a>
+<% else %>
+</div>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%# NumberFormatter component — ERB partial %>
+<%# Usage: render 'hotwirebits/number_formatter', ... %>
+
+<span <%= tag.attributes(local_assigns) %>><%= formatted_value %></span>

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

@@ -0,0 +1,4 @@
+<%# NumberInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/number_input', ... %>
+
+<input type="number" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="<%= input_classes %>" <%= tag.attributes(local_assigns) %>>

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

@@ -0,0 +1,40 @@
+<%# OrderSummary component — ERB partial %>
+<%# Usage: render 'hotwirebits/order_summary', ... %>
+
+<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">
+    <h3 class="text-base font-semibold text-hw-foreground">Order Summary</h3>
+  </div>
+  <ul class="divide-y divide-hw-border">
+    <% items.each do |item| %>
+      <li class="flex items-center gap-4 px-6 py-3">
+        <% if item[:image] %>
+          <img src="<%= item[:image] %>" alt="<%= item[:name] %>" class="h-12 w-12 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="text-xs text-hw-muted-foreground">Qty: <%= item[:quantity] %></p>
+        </div>
+        <span class="shrink-0 text-sm font-medium text-hw-foreground"><%= item[:price] %></span>
+      </li>
+    <% end %>
+  </ul>
+  <div class="space-y-2 border-t border-hw-border px-6 py-4 text-sm">
+    <div class="flex justify-between text-hw-muted-foreground">
+      <span>Subtotal</span>
+      <span><%= subtotal %></span>
+    </div>
+    <div class="flex justify-between text-hw-muted-foreground">
+      <span>Shipping</span>
+      <span><%= shipping || "Free" %></span>
+    </div>
+    <div class="flex justify-between text-hw-muted-foreground">
+      <span>Tax</span>
+      <span><%= tax %></span>
+    </div>
+    <div class="flex justify-between border-t border-hw-border pt-2 text-base font-semibold text-hw-foreground">
+      <span>Total</span>
+      <span><%= total.is_a?(Numeric) ? "$#{'%.2f' % total}" : total %></span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+<%# OrgChart component — ERB partial %>
+<%# Usage: render 'hotwirebits/org_chart', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% render_node = nil %>
+  <% render_node = ->(node, depth = 0) { %>
+  <div class="flex flex-col items-center">
+    <div class="flex flex-col items-center rounded-lg border border-hw-border bg-white p-4 shadow-sm">
+      <% if node[:avatar] %>
+        <img src="<%= node[:avatar] %>" alt="<%= node[:name] %>" class="mb-2 h-12 w-12 rounded-full object-cover">
+      <% else %>
+        <div class="mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-hw-primary text-sm font-bold text-hw-primary-foreground">
+          <%= node[:name].to_s.split.map(&:first).join[0..1].upcase %>
+        </div>
+      <% end %>
+      <p class="text-sm font-semibold text-hw-foreground"><%= node[:name] %></p>
+      <p class="text-xs text-hw-muted-foreground"><%= node[:title] %></p>
+    </div>
+    <% if node[:children]&.any? %>
+      <div class="mt-2 h-6 w-px bg-hw-border"></div>
+      <div class="flex gap-6 pt-2">
+        <% node[:children].each do |child| %>
+          <div class="relative flex flex-col items-center">
+            <div class="absolute -top-2 h-2 w-px bg-hw-border"></div>
+            <% render_node.call(child, depth + 1) %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <% } %>
+  <div class="flex justify-center">
+    <% nodes.each do |node| %>
+      <% render_node.call(node) %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+<%# PageHeading component — ERB partial %>
+<%# Usage: render 'hotwirebits/page_heading', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-bold text-hw-foreground"><%= title %></h1>
+      <% if description %>
+        <p class="mt-1 text-sm text-hw-muted-foreground"><%= description %></p>
+      <% end %>
+    </div>
+    <% if actions? %>
+      <div class="flex items-center gap-2 shrink-0">
+        <%= actions %>
+      </div>
+    <% end %>
+  </div>
+  <% if tabs.any? %>
+    <nav class="mt-4 -mb-px flex gap-6 border-b border-hw-border">
+      <% tabs.each do |tab| %>
+        <a href="<%= tab[:href] %>"
+           class="<%= merge_classes(
+             'inline-flex items-center border-b-2 px-1 py-3 text-sm font-medium transition-colors',
+             tab[:active] ? 'border-hw-primary text-hw-foreground' : 'border-transparent text-hw-muted-foreground hover:text-hw-foreground hover:border-hw-border'
+           ) %>">
+          <%= tab[:label] %>
+        </a>
+      <% end %>
+    </nav>
+  <% end %>
+</div>

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

@@ -0,0 +1,46 @@
+<%# Pagination component — ERB partial %>
+<%# Usage: render 'hotwirebits/pagination', current_page: 2, total_pages: 10, page_url: ->(p) { "/page/#{p}" } %>
+
+<%
+  current_page  = local_assigns.fetch(:current_page, 1)
+  total_pages   = local_assigns.fetch(:total_pages, 1)
+  page_url      = local_assigns.fetch(:page_url, ->(p) { "#page-#{p}" })
+  sibling_count = local_assigns.fetch(:sibling_count, 1)
+
+  # Build page range with gaps
+  range_start = [current_page - sibling_count, 1].max
+  range_end   = [current_page + sibling_count, total_pages].min
+  pages = []
+  pages << 1 if range_start > 1
+  pages << :gap if range_start > 2
+  (range_start..range_end).each { |p| pages << p unless pages.include?(p) }
+  pages << :gap if range_end < total_pages - 1
+  pages << total_pages if range_end < total_pages && !pages.include?(total_pages)
+%>
+
+<nav aria-label="Pagination" class="flex items-center justify-center gap-1">
+  <% if current_page > 1 %>
+    <a href="<%= page_url.call(current_page - 1) %>"
+       class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+      <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="M15 19l-7-7 7-7"/></svg>
+      Prev
+    </a>
+  <% end %>
+  <% pages.each do |page| %>
+    <% if page == :gap %>
+      <span class="px-2 text-hw-muted-foreground">&hellip;</span>
+    <% else %>
+      <a href="<%= page_url.call(page) %>"
+         class="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm transition-colors <%= page == current_page ? 'bg-hw-primary text-hw-primary-foreground' : 'hover:bg-hw-accent hover:text-hw-accent-foreground text-hw-muted-foreground' %>">
+        <%= page %>
+      </a>
+    <% end %>
+  <% end %>
+  <% if current_page < total_pages %>
+    <a href="<%= page_url.call(current_page + 1) %>"
+       class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+      Next
+      <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="M9 5l7 7-7 7"/></svg>
+    </a>
+  <% end %>
+</nav>

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

@@ -0,0 +1,39 @@
+<%# Paginator component — ERB partial %>
+<%# Usage: render 'hotwirebits/paginator', ... %>
+
+<nav class="flex flex-col sm:flex-row items-center justify-between gap-4" data-controller="hw-paginator" aria-label="Pagination" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-2 text-sm text-hw-muted-foreground">
+    <span>Rows per page:</span>
+    <select class="h-8 rounded-md border border-hw-input bg-hw-background px-2 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring" data-action="change->hw-paginator#changePerPage">
+      <% rows_options.each do |opt| %>
+        <option value="<%= opt %>" <%= 'selected' if opt == per_page %>><%= opt %></option>
+<% end %>
+</select>
+</div>
+<div class="flex items-center gap-2 text-sm text-hw-muted-foreground">
+  <span><%= range_text %></span>
+</div>
+<div class="flex items-center gap-1">
+  <% if current_page > 1 %>
+    <a href="<%= page_url(current_page - 1) %>" class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+      <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="M15 19l-7-7 7-7"/></svg>
+      Prev
+    </a>
+  <% end %>
+  <% pages.each do |page| %>
+    <% if page == :gap %>
+      <span class="px-2 text-hw-muted-foreground">&hellip;</span>
+    <% else %>
+      <a href="<%= page_url(page) %>" class="<%= merge_classes('inline-flex h-9 w-9 items-center justify-center rounded-md text-sm transition-colors', page == current_page ? 'bg-hw-primary text-hw-primary-foreground' : 'hover:bg-hw-accent hover:text-hw-accent-foreground text-hw-muted-foreground') %>">
+        <%= page %>
+      </a>
+    <% end %>
+  <% end %>
+  <% if current_page < total_pages %>
+    <a href="<%= page_url(current_page + 1) %>" class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+      Next
+      <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="M9 5l7 7-7 7"/></svg>
+    </a>
+  <% end %>
+</div>
+</nav>

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

@@ -0,0 +1,17 @@
+<%# Panel component — ERB partial %>
+<%# Usage: render 'hotwirebits/panel', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-card" data-controller="hw-panel" data-hw-panel-collapsed-value="<%= collapsed %>" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center justify-between px-4 py-3">
+    <button type="button" class="flex items-center gap-2 text-sm font-medium text-hw-foreground hover:text-hw-foreground/80" data-action="click->hw-panel#toggle">
+      <svg class="<%= merge_classes('h-4 w-4 shrink-0 transition-transform duration-200', collapsed ? '' : 'rotate-90') %>" data-hw-panel-target="chevron" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+      <span><%= title %></span>
+    </button>
+    <% if actions? %>
+      <div class="flex items-center gap-1"><%= actions %></div>
+    <% end %>
+  </div>
+  <div class="<%= merge_classes('px-4 pb-4', collapsed ? 'hidden' : '') %>" data-hw-panel-target="content">
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+<%# PasswordInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/password_input', ... %>
+
+<div class="relative" data-controller="hw-password">
+  <input type="password" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" <%= 'disabled' if disabled %> <%= 'required' if required %> class="<%= input_classes %>" data-hw-password-target="input" <%= tag.attributes(local_assigns) %>>
+  <% if show_toggle %>
+    <button type="button" class="absolute right-0 top-0 flex h-full items-center px-3 text-hw-muted-foreground hover:text-hw-foreground" data-action="click->hw-password#toggle">
+      <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,21 @@
+<%# PasswordStrength component — ERB partial %>
+<%# Usage: render 'hotwirebits/password_strength', ... %>
+
+<% level = lambda {
+  score = 0
+  score += 1 if password.length >= 8
+  score += 1 if password =~ /[a-z]/ && password =~ /[A-Z]/
+  score += 1 if password =~ /\d/
+  score += 1 if password =~ /[^a-zA-Z0-9]/
+  [score - 1, 0].max
+}.call %>
+<% colors = ['bg-hw-destructive', 'bg-hw-warning', 'bg-hw-warning', 'bg-hw-success'] %>
+<% labels = ['Too short', 'Weak', 'Fair', 'Good', 'Strong'] %>
+<div class="space-y-1.5" data-controller="hw-password-strength" <%= tag.attributes(local_assigns) %>>
+  <div class="flex gap-1">
+    <% 4.times do |i| %>
+      <div class="h-1.5 flex-1 rounded-full transition-colors <%= i <= level && level >= 0 ? colors[level] : 'bg-hw-muted' %>"></div>
+    <% end %>
+  </div>
+  <p class="text-xs <%= level >= 2 ? 'text-hw-success' : level >= 1 ? 'text-hw-warning' : 'text-hw-destructive' %>"><%= labels[level + 1] || labels[0] %></p>
+</div>

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

@@ -0,0 +1,18 @@
+<%# PasswordToggle component — ERB partial %>
+<%# Usage: render 'hotwirebits/password_toggle', ... %>
+
+<button type="button"
+        class="inline-flex items-center justify-center h-9 w-9 rounded-md text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors cursor-pointer"
+        data-controller="hw-password-toggle"
+        data-hw-password-toggle-target-input-value="<%= target_input %>"
+        data-action="click->hw-password-toggle#toggle"
+  aria-label="Toggle password visibility"
+  <%= tag.attributes(local_assigns) %>>
+  <svg class="h-4 w-4" data-hw-password-toggle-target="eyeOn" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+    <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+  </svg>
+  <svg class="h-4 w-4 hidden" data-hw-password-toggle-target="eyeOff" 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.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+  </svg>
+</button>

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

@@ -0,0 +1,18 @@
+<%# PermissionBadge component — ERB partial %>
+<%# Usage: render 'hotwirebits/permission_badge', ... %>
+
+<span class="<%= badge_classes %>" <%= tag.attributes(local_assigns) %>>
+  <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <% case role %>
+    <% when :admin %>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+    <% when :owner %>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/>
+    <% when :editor %>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+    <% else %>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+    <% end %>
+  </svg>
+  <%= display_label %>
+</span>

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

@@ -0,0 +1,4 @@
+<%# PhoneInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/phone_input', ... %>
+
+<input type="tel" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" <%= 'disabled' if disabled %> class="<%= input_classes %>" <%= tag.attributes(local_assigns) %>>

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

@@ -0,0 +1,15 @@
+<%# PhoneMockup component — ERB partial %>
+<%# Usage: render 'hotwirebits/phone_mockup', ... %>
+
+<div class="inline-block <%= frame_classes %> <%= border_color %>" <%= tag.attributes(local_assigns) %>>
+  <div class="relative bg-black h-full">
+    <% if device == :iphone %>
+      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-black rounded-b-2xl z-10"></div>
+    <% else %>
+      <div class="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-2 bg-hw-foreground/80 rounded-full z-10"></div>
+    <% end %>
+    <div class="<%= device == :iphone ? 'pt-6' : 'pt-4' %>">
+      <%= content %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<%# Popover component — ERB partial %>
+<%# Usage: render 'hotwirebits/popover', ... %>
+
+<div class="relative inline-block"
+     data-controller="hw-popover"
+     data-hw-popover-open-value="<%= open %>">
+  <div data-action="click->hw-popover#toggle" data-hw-popover-target="trigger" class="inline-block">
+    <% if trigger? %>
+      <%= trigger %>
+    <% else %>
+      <button type="button" class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground h-9 px-3">
+        Open
+      </button>
+    <% end %>
+  </div>
+  <div class="<%= popover_classes %> <%= align_classes %>"
+       data-hw-popover-target="content"
+       data-state="<%= open ? 'open' : 'closed' %>"
+       data-side="<%= side %>"
+       <%= tag.attributes(local_assigns) %>>
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<%# Portal component — ERB partial %>
+<%# Usage: render 'hotwirebits/portal', ... %>
+
+<template data-controller="hw-portal" data-hw-portal-target-value="<%= target %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</template>

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

@@ -0,0 +1,55 @@
+<%# Pricing partial - local variables: title, subtitle, plans, class %>
+<%
+  title ||= local_assigns[:title]
+  subtitle ||= local_assigns[:subtitle]
+  plans ||= local_assigns[:plans] || []
+  extra_class ||= local_assigns[:class]
+
+  plan_count = [[plans.size, 4].min, 1].max
+%>
+<section class="py-12 md:py-24 lg:py-32 <%= extra_class %>">
+  <div class="mx-auto max-w-5xl px-4">
+    <% if title || subtitle %>
+      <div class="text-center mb-12">
+        <% if title %>
+          <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground"><%= title %></h2>
+        <% end %>
+        <% if subtitle %>
+          <p class="mt-3 text-lg text-hw-muted-foreground"><%= subtitle %></p>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-<%= plan_count %>">
+      <% plans.each do |plan| %>
+        <div class="flex flex-col rounded-xl border <%= plan[:highlighted] ? 'border-hw-primary shadow-lg ring-1 ring-hw-primary' : 'border-hw-border' %> bg-hw-card p-6">
+          <% if plan[:highlighted] %>
+            <span class="self-start rounded-full bg-hw-primary text-hw-primary-foreground px-3 py-1 text-xs font-medium mb-2">Popular</span>
+          <% end %>
+          <h3 class="text-lg font-semibold text-hw-foreground"><%= plan[:name] %></h3>
+          <div class="mt-3 flex items-baseline gap-1">
+            <span class="text-4xl font-bold text-hw-foreground"><%= plan[:price] %></span>
+            <% if plan[:period] %>
+              <span class="text-sm text-hw-muted-foreground">/<%= plan[:period] %></span>
+            <% end %>
+          </div>
+          <% if plan[:features] %>
+            <ul class="mt-6 space-y-3 flex-1">
+              <% plan[:features].each do |feature| %>
+                <li class="flex items-start gap-2 text-sm text-hw-foreground">
+                  <svg class="h-4 w-4 text-hw-success shrink-0 mt-0.5" 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>
+                  <%= feature %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+          <a href="<%= plan[:cta_href] || '#' %>"
+             class="mt-6 inline-flex items-center justify-center rounded-lg h-10 px-4 text-sm font-medium transition-colors <%= plan[:highlighted] ? 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' : 'border border-hw-border text-hw-foreground hover:bg-hw-muted' %>">
+            <%= plan[:cta_label] || 'Get Started' %>
+          </a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,49 @@
+<%# PricingSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/pricing_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if title || subtitle %>
+      <div class="text-center mb-12">
+        <% if title %>
+          <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground"><%= title %></h2>
+        <% end %>
+        <% if subtitle %>
+          <p class="mt-3 text-lg text-hw-muted-foreground"><%= subtitle %></p>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-<%= [plans.size, 4].min %>">
+      <% plans.each do |plan| %>
+        <div class="flex flex-col rounded-xl border <%= plan[:highlighted] ? 'border-hw-primary shadow-lg ring-1 ring-hw-primary' : 'border-hw-border' %> bg-hw-card p-6">
+          <% if plan[:highlighted] %>
+            <span class="self-start rounded-full bg-hw-primary text-hw-primary-foreground px-3 py-1 text-xs font-medium mb-2">Popular</span>
+          <% end %>
+          <h3 class="text-lg font-semibold text-hw-foreground"><%= plan[:name] %></h3>
+          <div class="mt-3 flex items-baseline gap-1">
+            <span class="text-4xl font-bold text-hw-foreground"><%= plan[:price] %></span>
+            <% if plan[:period] %>
+              <span class="text-sm text-hw-muted-foreground">/<%= plan[:period] %></span>
+            <% end %>
+          </div>
+          <% if plan[:features] %>
+            <ul class="mt-6 space-y-3 flex-1">
+              <% plan[:features].each do |feature| %>
+                <li class="flex items-start gap-2 text-sm text-hw-foreground">
+                  <svg class="h-4 w-4 text-hw-success shrink-0 mt-0.5" 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>
+                  <%= feature %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+          <a href="<%= plan[:cta_href] || '#' %>"
+             class="mt-6 inline-flex items-center justify-center rounded-lg h-10 px-4 text-sm font-medium transition-colors <%= plan[:highlighted] ? 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' : 'border border-hw-border text-hw-foreground hover:bg-hw-muted' %>">
+            <%= plan[:cta_label] || 'Get Started' %>
+          </a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,27 @@
+<%# ProductList component — ERB partial %>
+<%# Usage: render 'hotwirebits/product_list', ... %>
+
+<div class="<%= grid_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% products.each do |product| %>
+    <a href="<%= product[:href] || '#' %>" class="group rounded-xl border border-hw-border bg-white overflow-hidden transition-shadow hover:shadow-lg">
+      <div class="aspect-square overflow-hidden bg-hw-muted">
+        <% if product[:image] %>
+          <img src="<%= product[:image] %>" alt="<%= product[:name] %>" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
+        <% end %>
+      </div>
+      <div class="p-4">
+        <h3 class="truncate text-sm font-medium text-hw-foreground"><%= product[:name] %></h3>
+        <p class="mt-1 text-sm font-semibold text-hw-primary"><%= product[:price] %></p>
+        <% if product[:rating] %>
+          <div class="mt-1.5 flex items-center gap-0.5">
+            <% 5.times do |i| %>
+              <svg class="h-3.5 w-3.5 <%= i < product[: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 %>
+          </div>
+        <% end %>
+      </div>
+    </a>
+  <% end %>
+</div>