hotwirebits 0.1.0

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

@@ -0,0 +1,15 @@
+<%# InputTags component — ERB partial %>
+<%# Usage: render 'hotwirebits/input_tags', ... %>
+
+<div class="flex flex-wrap gap-1.5 rounded-md border border-hw-input bg-hw-background p-1.5 ring-offset-hw-background focus-within:ring-2 focus-within:ring-hw-ring focus-within:ring-offset-2" data-controller="hw-tags">
+  <% value.each do |v| %>
+    <span class="inline-flex items-center gap-1 rounded-sm bg-hw-secondary px-1.5 py-0.5 text-xs text-hw-secondary-foreground">
+      <span><%= v %></span>
+      <button type="button" class="text-hw-muted-foreground hover:text-hw-foreground" data-action="click->hw-tags#remove" data-value="<%= v %>">
+        <svg class="h-3 w-3" 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>
+    </span>
+    <input type="hidden" name="<%= name %>[]" value="<%= v %>">
+  <% end %>
+  <input type="text" placeholder="<%= placeholder %>" <%= 'disabled' if disabled || (max && value.size >= max) %> class="flex-1 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground outline-none min-w-[80px]" data-action="keydown->hw-tags#keydown" data-hw-tags-target="input" <%= tag.attributes(local_assigns) %>>
+</div>

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

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

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

@@ -0,0 +1,17 @@
+<%# JsonInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/json_input', ... %>
+
+<div data-controller="hw-json-input" data-hw-json-input-validate-value="<%= validate %>" class="space-y-2">
+  <textarea
+    name="<%= name %>"
+    rows="<%= rows %>"
+    placeholder="<%= placeholder %>"
+    spellcheck="false"
+    class="w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm font-mono 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 disabled:cursor-not-allowed disabled:opacity-50"
+    data-hw-json-input-target="textarea"
+    data-action="input->hw-json-input#validate"
+    <%= tag.attributes(local_assigns) %>><%= formatted_value %></textarea>
+  <div class="flex items-center gap-2 text-xs text-hw-muted-foreground" data-hw-json-input-target="status">
+    <span></span>
+  </div>
+</div>

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

@@ -0,0 +1,42 @@
+<%# KanbanBoard component — ERB partial %>
+<%# Usage: render 'hotwirebits/kanban_board', ... %>
+
+<div class="<%= container_classes %>"
+     data-controller="hw-kanban"
+     <%= tag.attributes(local_assigns) %>>
+  <% columns.each do |col| %>
+    <div class="w-72 shrink-0 rounded-lg border border-hw-border bg-hw-muted/30 p-3"
+         data-hw-kanban-target="column"
+         data-column="<%= col[:title] %>">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="text-sm font-semibold text-hw-foreground"><%= col[:title] %></h3>
+        <span class="text-xs text-hw-muted-foreground bg-hw-muted rounded-full px-2 py-0.5">
+          <%= col[:items]&.size || 0 %>
+        </span>
+      </div>
+      <div class="space-y-2 min-h-[100px]"
+           data-hw-kanban-target="list"
+           data-action="dragover->hw-kanban#dragover drop->hw-kanban#drop">
+        <% (col[:items] || []).each do |item| %>
+          <div class="rounded-md border border-hw-border bg-hw-card p-3 shadow-sm cursor-grab active:cursor-grabbing"
+               draggable="true"
+               data-hw-kanban-target="card"
+               data-action="dragstart->hw-kanban#dragstart dragend->hw-kanban#dragend"
+            data-id="<%= item[:id] %>">
+            <p class="text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+            <% if item[:description] %>
+              <p class="mt-1 text-xs text-hw-muted-foreground line-clamp-2"><%= item[:description] %></p>
+            <% end %>
+            <% if item[:tags]&.any? %>
+              <div class="mt-2 flex flex-wrap gap-1">
+                <% item[:tags].each do |tag| %>
+                  <span class="inline-block rounded-full bg-hw-accent px-2 py-0.5 text-xs text-hw-accent-foreground"><%= tag %></span>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,17 @@
+<%# Kbd component — ERB partial %>
+<%# Usage: render 'hotwirebits/kbd', key: "Ctrl", size: :md %>
+
+<%
+  key   = local_assigns.fetch(:key, "")
+  label = local_assigns.fetch(:label, key)
+  size  = local_assigns.fetch(:size, :md)
+
+  size_cls = case size
+             when :sm then "px-1 py-0.5 text-[10px]"
+             when :lg then "px-2.5 py-1 text-sm"
+             else "px-1.5 py-0.5 text-xs"
+             end
+  kbd_cls = "inline-flex items-center rounded border border-hw-border bg-hw-muted font-mono font-medium text-hw-muted-foreground #{size_cls}"
+%>
+
+<kbd class="<%= kbd_cls %>"><%= label %></kbd>

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

@@ -0,0 +1,19 @@
+<%# Knob component — ERB partial %>
+<%# Usage: render 'hotwirebits/knob', ... %>
+
+<% size_px = { sm: 48, md: 64, lg: 96 }[size] || 64 %>
+<% stroke = size_px / 10 %>
+<% radius = (size_px - stroke) / 2.0 %>
+<% circumference = 2 * Math::PI * radius %>
+<% progress = ((value - min).to_f / [max - min, 1].max) * 0.75 %>
+<% dashoffset = circumference * (1 - progress) %>
+<% center = size_px / 2.0 %>
+<% color_class = color || 'hw-primary' %>
+<div class="relative inline-flex items-center justify-center" data-controller="hw-knob" <%= tag.attributes(local_assigns) %>>
+  <svg width="<%= size_px %>" height="<%= size_px %>" class="-rotate-[135deg]">
+    <circle cx="<%= center %>" cy="<%= center %>" r="<%= radius %>" fill="none" stroke="currentColor" stroke-width="<%= stroke %>" stroke-dasharray="<%= circumference * 0.75 %> <%= circumference * 0.25 %>" class="text-hw-muted"/>
+    <circle cx="<%= center %>" cy="<%= center %>" r="<%= radius %>" fill="none" stroke="currentColor" stroke-width="<%= stroke %>" stroke-dasharray="<%= circumference * 0.75 %> <%= circumference * 0.25 %>" stroke-dashoffset="<%= dashoffset %>" stroke-linecap="round" class="text-<%= color_class %> transition-all duration-150" data-hw-knob-target="progress"/>
+  </svg>
+  <span class="absolute text-xs font-medium text-hw-foreground" data-hw-knob-target="value"><%= value %></span>
+      <input type="range" name="<%= name %>" value="<%= value %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="absolute inset-0 opacity-0 cursor-pointer" data-action="input->hw-knob#update">
+    </div>

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

@@ -0,0 +1,8 @@
+<%# Label component — ERB partial %>
+<%# Usage: render 'hotwirebits/label', ... %>
+
+<label class="<%= label_classes %>" <%= for_field ? "for='#{for_field}'" : '' %> <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+  <% if required %><span class="text-hw-destructive"> *</span><% end %>
+<% if optional %><span class="text-hw-muted-foreground font-normal text-xs ml-1">(optional)</span><% end %>
+</label>

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

@@ -0,0 +1,33 @@
+<%# Lightbox component — ERB partial %>
+<%# Usage: render 'hotwirebits/lightbox', ... %>
+
+<div class="fixed inset-0 z-50 hidden items-center justify-center bg-black/90"
+     data-controller="hw-lightbox"
+     data-hw-lightbox-images-value="<%= images.to_json %>"
+     data-hw-lightbox-index-value="<%= current_index %>"
+     data-hw-lightbox-target="overlay"
+     <%= tag.attributes(local_assigns) %>>
+  <button type="button"
+          class="absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#close">
+    <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+    </svg>
+  </button>
+  <button type="button"
+          class="absolute left-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#prev">
+    <svg class="h-6 w-6" 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="M15.75 19.5L8.25 12l7.5-7.5"/>
+    </svg>
+  </button>
+  <button type="button"
+          class="absolute right-4 top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/10 p-2 text-hw-primary-foreground backdrop-blur hover:bg-white/20"
+          data-action="click->hw-lightbox#next">
+    <svg class="h-6 w-6" 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="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+    </svg>
+  </button>
+  <img data-hw-lightbox-target="image" src="" alt="" class="max-h-[90vh] max-w-[90vw] object-contain rounded-lg">
+  <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-sm text-hw-primary-foreground/70" data-hw-lightbox-target="counter"></div>
+</div>

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

@@ -0,0 +1,18 @@
+<%# LikeButton component — ERB partial %>
+<%# Usage: render 'hotwirebits/like_button', ... %>
+
+<button type="button"
+        class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-medium transition-colors cursor-pointer <%= liked ? 'text-hw-destructive bg-hw-destructive/10 hover:bg-hw-destructive/20' : 'text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground' %>"
+        data-controller="hw-like"
+        data-hw-like-liked-value="<%= liked %>"
+        data-action="click->hw-like#toggle"
+  aria-pressed="<%= liked %>"
+  <%= tag.attributes(local_assigns) %>>
+  <% if name %>
+    <input type="hidden" name="<%= name %>" value="<%= liked %>" data-hw-like-target="input">
+  <% end %>
+  <svg class="<%= icon_size %>" data-hw-like-target="icon" xmlns="http://www.w3.org/2000/svg" fill="<%= liked ? 'currentColor' : 'none' %>" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
+  </svg>
+  <span data-hw-like-target="count"><%= count %></span>
+</button>

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

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

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

@@ -0,0 +1,19 @@
+<%# Listbox component — ERB partial %>
+<%# Usage: render 'hotwirebits/listbox', ... %>
+
+<div class="rounded-md border border-hw-input bg-hw-background" role="listbox" aria-multiselectable="<%= multiple %>" data-controller="hw-listbox" <%= tag.attributes(local_assigns) %>>
+  <% options.each do |opt| %>
+    <% selected = selected.include?(opt[:value]) %>
+    <div class="<%= option_classes(selected, opt[:disabled]) %>" role="option" aria-selected="<%= selected %>" <%= 'aria-disabled="true"' if opt[:disabled] %> data-action="<%= 'click->hw-listbox#select' unless opt[:disabled] %>" data-value="<%= opt[:value] %>">
+      <% if selected %>
+        <svg class="h-4 w-4 text-hw-primary shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+      <% end %>
+      <span class="flex-1"><%= opt[:label] %></span>
+    </div>
+  <% end %>
+  <% if name %>
+    <% selected.each do |v| %>
+      <input type="hidden" name="<%= multiple ? "#{name}[]" : name %>" value="<%= v %>">
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,15 @@
+<%# LoadingOverlay component — ERB partial %>
+<%# Usage: render 'hotwirebits/loading_overlay', ... %>
+
+<div class="relative" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+  <div class="absolute inset-0 z-10 flex flex-col items-center justify-center rounded-md bg-hw-background/60 backdrop-blur-[1px]">
+    <svg class="<%= spinner_class %> animate-spin text-hw-primary" 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>
+    <% if text %>
+      <p class="mt-2 text-sm text-hw-muted-foreground"><%= text %></p>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<%# LogoCloud component — ERB partial %>
+<%# Usage: render 'hotwirebits/logo_cloud', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl text-center">
+    <% if title %>
+      <p class="text-sm font-medium text-hw-muted-foreground mb-8"><%= title %></p>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% logos.each do |logo| %>
+        <a href="<%= logo[:url] || '#' %>"
+           class="flex items-center justify-center grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition-all"
+           target="_blank" rel="noopener noreferrer">
+          <% if logo[:image_url] %>
+            <img src="<%= logo[:image_url] %>" alt="<%= logo[:name] %>" class="h-8 md:h-10 object-contain">
+          <% else %>
+            <span class="text-lg font-semibold text-hw-muted-foreground"><%= logo[:name] %></span>
+          <% end %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,10 @@
+<%# LogoItem component — ERB partial %>
+<%# Usage: render 'hotwirebits/logo_item', ... %>
+
+<a href="<%= url || '#' %>" class="<%= item_classes %>" <%= url ? 'target="_blank" rel="noopener noreferrer"'.html_safe : '' %> <%= tag.attributes(local_assigns) %>>
+  <% if image_url %>
+    <img src="<%= image_url %>" alt="<%= name %>" class="h-8 md:h-10 object-contain">
+<% else %>
+  <span class="text-lg font-semibold text-hw-muted-foreground"><%= name %></span>
+<% end %>
+</a>

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

@@ -0,0 +1,4 @@
+<%# Mark component — ERB partial %>
+<%# Usage: render 'hotwirebits/mark', ... %>
+
+<mark class="<%= mark_classes %>" <%= tag.attributes(local_assigns) %>><%= content %></mark>

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

@@ -0,0 +1,32 @@
+<%# Marquee component — ERB partial %>
+<%# Usage: render 'hotwirebits/marquee', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="<%= track_classes %>"
+       style="animation: <%= animation_name %> <%= speed %>s linear infinite;">
+    <div class="flex <%= vertical? ? 'flex-col' : 'flex-row' %> items-center gap-8 shrink-0 px-4">
+      <%= content %>
+    </div>
+    <div class="flex <%= vertical? ? 'flex-col' : 'flex-row' %> items-center gap-8 shrink-0 px-4" aria-hidden="true">
+      <%= content %>
+    </div>
+  </div>
+  <style>
+    keyframes hw-marquee-left {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+    keyframes hw-marquee-right {
+      0% { transform: translateX(-50%); }
+      100% { transform: translateX(0); }
+    }
+    keyframes hw-marquee-up {
+      0% { transform: translateY(0); }
+      100% { transform: translateY(-50%); }
+    }
+    keyframes hw-marquee-down {
+      0% { transform: translateY(-50%); }
+      100% { transform: translateY(0); }
+    }
+  </style>
+</div>

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

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

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

@@ -0,0 +1,46 @@
+<%# MegaMenu component — ERB partial %>
+<%# Usage: render 'hotwirebits/mega_menu', ... %>
+
+<div class="relative" data-controller="hw-dropdown" <%= tag.attributes(local_assigns) %>>
+  <button type="button"
+          class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-hw-foreground hover:bg-hw-muted"
+          data-action="click->hw-dropdown#toggle mouseenter->hw-dropdown#open"
+    data-hw-dropdown-target="trigger">
+    <%= trigger_label %>
+    <svg class="h-4 w-4 transition-transform" data-hw-dropdown-target="chevron" 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="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
+    </svg>
+  </button>
+  <div class="absolute left-1/2 z-50 mt-1 hidden w-screen max-w-4xl -translate-x-1/2 rounded-xl border border-hw-border bg-white p-6 shadow-xl"
+       data-hw-dropdown-target="menu"
+       data-action="mouseleave->hw-dropdown#close">
+    <div class="grid grid-cols-<%= [columns.size, 4].min %> gap-6">
+      <% columns.each do |col| %>
+        <div>
+          <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-hw-muted-foreground"><%= col[:title] %></p>
+          <ul class="space-y-3">
+            <% col[:links].each do |link| %>
+              <li>
+                <a href="<%= link[:href] %>" class="group flex items-start gap-3 rounded-lg p-2 -m-2 hover:bg-hw-muted">
+                  <% if link[:icon] %>
+                    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-hw-primary/10 text-hw-primary">
+                      <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="<%= link[:icon] %>"/>
+                      </svg>
+                    </div>
+                  <% end %>
+                  <div>
+                          <p class="text-sm font-medium text-hw-foreground"><%= link[:label] %></p>
+                          <% if link[:desc] %>
+                            <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= link[:desc] %></p>
+                          <% end %>
+                        </div>
+                      </a>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>

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

@@ -0,0 +1,35 @@
+<%# Menu component — ERB partial %>
+<%# Usage: render 'hotwirebits/menu', ... %>
+
+<nav class="<%= menu_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <div>
+  <a href="<%= item[:href] %>"
+         class="<%= merge_classes(
+           'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+           item[:active] ? 'bg-hw-accent text-hw-accent-foreground font-medium' : 'text-hw-muted-foreground hover:bg-hw-accent/50 hover:text-hw-accent-foreground'
+         ) %>">
+    <% if item[:icon] %>
+      <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+    <% end %>
+    <span class="flex-1"><%= item[:label] %></span>
+    <% if item[:badge] %>
+      <span class="ml-auto rounded-full bg-hw-primary/10 px-2 py-0.5 text-xs font-medium text-hw-primary"><%= item[:badge] %></span>
+    <% end %>
+  </a>
+  <% if item[:children]&.any? %>
+    <div class="ml-4 mt-0.5 space-y-0.5 border-l border-hw-border pl-3">
+      <% item[:children].each do |child| %>
+        <a href="<%= child[:href] %>"
+               class="<%= merge_classes(
+                 'flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors',
+                 child[:active] ? 'text-hw-foreground font-medium' : 'text-hw-muted-foreground hover:text-hw-foreground'
+               ) %>">
+          <%= child[:label] %>
+        </a>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+<% end %>
+</nav>

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

@@ -0,0 +1,33 @@
+<%# Menubar component — ERB partial %>
+<%# Usage: render 'hotwirebits/menubar', ... %>
+
+<div class="flex h-10 items-center gap-1 rounded-md border border-hw-border bg-hw-background px-1" data-controller="hw-menubar" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <div class="relative"
+         data-action="mouseenter->hw-menubar#open mouseleave->hw-menubar#close click->hw-menubar#toggle">
+      <button type="button"
+              class="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer">
+        <%= item[:label] %>
+      </button>
+      <% if item[:children]&.any? %>
+        <div data-hw-menubar-target="menu" class="absolute left-0 top-full hidden z-50 min-w-[12rem] pt-1">
+          <div class="rounded-md border border-hw-border bg-hw-popover p-1 shadow-md">
+            <% item[:children].each do |child| %>
+              <% if child[:separator] %>
+                <div class="-mx-1 my-1 h-px bg-hw-border"></div>
+              <% else %>
+                <a href="<%= child[:href] %>"
+                   class="relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+                  <span><%= child[:label] %></span>
+                  <% if child[:shortcut] %>
+                    <span class="ml-4 text-xs tracking-widest text-hw-muted-foreground"><%= child[:shortcut] %></span>
+                  <% end %>
+                </a>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,19 @@
+<%# MeterGroup component — ERB partial %>
+<%# Usage: render 'hotwirebits/meter_group', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% items.each do |item| %>
+    <div>
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-sm font-medium text-hw-foreground"><%= item[:label] %></span>
+        <span class="text-sm text-hw-muted-foreground"><%= bar_percentage(item) %>%</span>
+      </div>
+      <div class="w-full h-2.5 rounded-full bg-hw-muted overflow-hidden">
+        <div
+          class="h-full rounded-full transition-all duration-300 <%= bar_color(item) %>"
+          style="width: <%= bar_percentage(item) %>%;"
+        ></div>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,28 @@
+<%# MonthPicker component — ERB partial %>
+<%# Usage: render 'hotwirebits/month_picker', ... %>
+
+<div data-controller="hw-month-picker" class="space-y-3" <%= tag.attributes(local_assigns) %>>
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-month-picker-target="hidden">
+  <div class="flex items-center justify-between gap-2">
+    <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-hw-accent transition-colors" data-action="click->hw-month-picker#prevYear">
+      <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>
+    </button>
+    <span class="text-sm font-medium" data-hw-month-picker-target="year"><%= current_year %></span>
+    <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-hw-accent transition-colors" data-action="click->hw-month-picker#nextYear">
+      <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>
+    </button>
+  </div>
+  <div class="grid grid-cols-3 gap-1">
+    <% MONTHS.each_with_index do |month, i| %>
+      <button type="button"
+              class="<%= merge_classes(
+                'rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-hw-accent',
+                (i + 1) == current_month ? 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' : ''
+              ) %>"
+              data-action="click->hw-month-picker#select"
+        data-month="<%= i + 1 %>">
+        <%= month[0..2] %>
+      </button>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<%# MonthPickerInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/month_picker_input', ... %>
+
+<div class="relative" data-controller="hw-month-picker-input" <%= tag.attributes(local_assigns) %>>
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-month-picker-input-target="hidden">
+  <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+    </div>
+    <input type="text"
+           readonly
+           value="<%= formatted_value %>"
+           placeholder="<%= placeholder %>"
+           class="flex h-9 w-full rounded-md border border-hw-input bg-hw-background pl-9 pr-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 cursor-pointer"
+           data-action="click->hw-month-picker-input#open"
+    data-hw-month-picker-input-target="input">
+  </div>
+  <div class="absolute z-50 mt-1 hidden rounded-md border border-hw-border bg-hw-popover p-3 shadow-md"
+       data-hw-month-picker-input-target="dropdown">
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+<%# Multiselect component — ERB partial %>
+<%# Usage: render 'hotwirebits/multiselect', ... %>
+
+<div class="relative" data-controller="hw-multiselect">
+  <button type="button" <%= 'disabled' if disabled %> class="flex h-9 w-full items-center justify-between 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 disabled:cursor-not-allowed disabled:opacity-50" data-action="click->hw-multiselect#toggle">
+    <span class="<%= selected.any? ? '' : 'text-hw-muted-foreground' %>"><%= selected.any? ? "#{selected.size} selected" : placeholder %></span>
+    <svg class="h-4 w-4 opacity-50" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div class="absolute z-50 mt-1 w-full rounded-md border border-hw-border bg-hw-popover shadow-md hidden" data-hw-multiselect-target="dropdown">
+    <ul class="max-h-60 overflow-auto p-1">
+      <% 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">
+          <input type="checkbox" name="<%= name %>[]" value="<%= value %>" <%= 'checked' if selected.include?(value) %> class="mr-2 h-4 w-4 rounded border-hw-input">
+          <span><%= label %></span>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<%# NativeSelect component — ERB partial %>
+<%# Usage: render 'hotwirebits/native_select', ... %>
+
+<select name="<%= name %>" <%= 'disabled' if disabled %> class="<%= select_classes %>" <%= tag.attributes(local_assigns) %>>
+  <option value="" disabled <%= 'selected' unless selected %>><%= placeholder %></option>
+  <% options.each do |opt| %>
+    <% if opt.is_a?(Array) %>
+      <option value="<%= opt.last %>" <%= 'selected' if selected == opt.last %>><%= opt.first %></option>
+      <% else %>
+        <option value="<%= opt %>" <%= 'selected' if selected == opt %>><%= opt %></option>
+        <% end %>
+      <% end %>
+    </select>

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

@@ -0,0 +1,12 @@
+<%# NavLink component — ERB partial %>
+<%# Usage: render 'hotwirebits/nav_link', ... %>
+
+<a href="<%= href %>" class="<%= link_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if icon %>
+    <span class="h-4 w-4 shrink-0"><%= safe_svg(icon) %></span>
+<% end %>
+<span class="flex-1"><%= content || label %></span>
+<% if badge %>
+  <span class="ml-auto rounded-full bg-hw-primary/10 px-2 py-0.5 text-xs font-medium text-hw-primary"><%= badge %></span>
+<% end %>
+</a>

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

@@ -0,0 +1,30 @@
+<%# Navbar component — ERB partial %>
+<%# Usage: render 'hotwirebits/navbar', brand: "MyApp", items: [] %>
+
+<%
+  brand       = local_assigns[:brand]
+  items       = local_assigns.fetch(:items, [])
+  extra_class = local_assigns[:class]
+  nav_cls     = ["border-b border-hw-border bg-hw-background/95 backdrop-blur supports-[backdrop-filter]:bg-hw-background/60", extra_class].compact.join(" ")
+%>
+
+<nav class="<%= nav_cls %>">
+  <div class="mx-auto flex h-14 max-w-screen-xl items-center px-4">
+    <% if brand %>
+      <a href="/" class="mr-6 flex items-center space-x-2 font-semibold text-hw-foreground">
+        <%= brand %>
+      </a>
+    <% end %>
+    <% if items.any? %>
+      <nav class="flex items-center gap-6 text-sm">
+        <% items.each do |item| %>
+          <a href="<%= item[:href] %>" class="transition-colors hover:text-hw-foreground <%= item[:active] ? 'text-hw-foreground font-medium' : 'text-hw-muted-foreground' %>">
+            <%= item[:label] %>
+          </a>
+        <% end %>
+      </nav>
+    <% end %>
+    <div class="flex flex-1 items-center justify-end gap-2">
+    </div>
+  </div>
+</nav>