hotwirebits 0.1.0

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

@@ -0,0 +1,38 @@
+<%# FlyoutMenu component — ERB partial %>
+<%# Usage: render 'hotwirebits/flyout_menu', ... %>
+
+<div class="relative inline-block" data-controller="hw-dropdown" <%= tag.attributes(local_assigns) %>>
+  <button type="button"
+          class="inline-flex items-center gap-1 text-sm font-medium text-hw-foreground hover:text-hw-primary"
+          data-action="click->hw-dropdown#toggle mouseenter->hw-dropdown#open">
+    <%= trigger_label %>
+    <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
+    </svg>
+  </button>
+  <div class="absolute z-50 hidden w-72 rounded-lg border border-hw-border bg-white p-2 shadow-xl"
+       data-hw-dropdown-target="menu"
+       data-action="mouseleave->hw-dropdown#close"
+    style="position: absolute;" class="<%= menu_position %>">
+    <div class="space-y-1">
+      <% items.each do |item| %>
+        <a href="<%= item[:href] %>"
+           class="flex items-start gap-3 rounded-lg p-3 text-sm transition-colors hover:bg-hw-muted">
+          <% if item[: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="<%= item[:icon] %>"/>
+              </svg>
+            </div>
+          <% end %>
+          <div>
+                  <p class="font-medium text-hw-foreground"><%= item[:label] %></p>
+                  <% if item[:description] %>
+                    <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= item[:description] %></p>
+                  <% end %>
+                </div>
+              </a>
+            <% end %>
+          </div>
+        </div>
+      </div>

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

@@ -0,0 +1,46 @@
+<%# Footer component — ERB partial %>
+<%# Usage: render 'hotwirebits/footer', ... %>
+
+<footer class="border-t border-hw-border bg-hw-background" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-screen-xl px-4 py-12">
+    <div class="grid gap-8 sm:grid-cols-2 md:grid-cols-<%= [columns.size + 1, 4].min %>">
+      <div>
+        <% if brand %>
+          <a href="/" class="text-lg font-semibold text-hw-foreground"><%= brand %></a>
+        <% end %>
+        <% if social_links.any? %>
+          <div class="mt-4 flex gap-4">
+            <% social_links.each do |link| %>
+              <a href="<%= link[:href] %>" class="text-hw-muted-foreground hover:text-hw-foreground transition-colors" aria-label="<%= link[:label] %>" target="_blank" rel="noopener noreferrer">
+                <% if link[:icon] %>
+                  <span class="h-5 w-5"><%= safe_svg(link[:icon]) %></span>
+                <% else %>
+                  <span class="text-sm"><%= link[:label] %></span>
+                <% end %>
+              </a>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% columns.each do |col| %>
+        <div>
+          <h3 class="mb-3 text-sm font-semibold text-hw-foreground"><%= col[:title] %></h3>
+          <ul class="space-y-2">
+            <% col[:links].each do |link| %>
+              <li>
+                <a href="<%= link[:href] %>" class="text-sm text-hw-muted-foreground hover:text-hw-foreground transition-colors"><%= link[:label] %></a>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% if copyright %>
+    <div class="border-t border-hw-border">
+      <div class="mx-auto max-w-screen-xl px-4 py-4">
+        <p class="text-center text-xs text-hw-muted-foreground"><%= copyright %></p>
+      </div>
+    </div>
+  <% end %>
+</footer>

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

@@ -0,0 +1,43 @@
+<%# FormGroup component — ERB partial %>
+<%# Usage: render 'hotwirebits/form_group', label: "Email", hint: "Enter email" %>
+
+<%
+  label      = local_assigns[:label]
+  name       = local_assigns[:name]
+  hint       = local_assigns[:hint]
+  error      = local_assigns[:error]
+  required   = local_assigns.fetch(:required, false)
+  horizontal = local_assigns.fetch(:horizontal, false)
+%>
+
+<% if horizontal %>
+  <div class="grid grid-cols-4 items-start gap-4">
+    <div class="pt-2">
+      <% if label %>
+        <label for="<%= name %>" class="text-sm font-medium text-hw-foreground"><%= label %><% if required %> <span class="text-hw-destructive">*</span><% end %></label>
+      <% end %>
+      <% if hint %>
+        <p class="text-xs text-hw-muted-foreground mt-0.5"><%= hint %></p>
+      <% end %>
+    </div>
+    <div class="col-span-3">
+      <% if block_given? %><%= yield %><% end %>
+      <% if error %>
+        <p class="text-xs text-hw-destructive mt-1"><%= error %></p>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="space-y-2">
+    <% if label %>
+      <label for="<%= name %>" class="text-sm font-medium leading-none"><%= label %><% if required %> <span class="text-hw-destructive">*</span><% end %></label>
+    <% end %>
+    <% if block_given? %><%= yield %><% end %>
+    <% if hint && !error %>
+      <p class="text-xs text-hw-muted-foreground"><%= hint %></p>
+    <% end %>
+    <% if error %>
+      <p class="text-xs text-hw-destructive"><%= error %></p>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,28 @@
+<%# Gallery component — ERB partial %>
+<%# Usage: render 'hotwirebits/gallery', ... %>
+
+<div class="<%= container_classes %>"
+     <% if with_lightbox %>data-controller="hw-lightbox"<% end %>
+     <%= tag.attributes(local_assigns) %>>
+  <% images.each_with_index do |image, index| %>
+    <figure class="group relative overflow-hidden rounded-lg">
+      <img src="<%= image[:src] %>" alt="<%= image[:alt] %>"
+           class="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105"
+           <% if with_lightbox %>
+             data-action="click->hw-lightbox#open"
+      data-hw-lightbox-index-param="<%= index %>"
+      role="button" tabindex="0"
+    <% end %>>
+    <% if image[:caption] %>
+      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-sm text-hw-primary-foreground opacity-0 transition-opacity group-hover:opacity-100">
+        <%= image[:caption] %>
+      </figcaption>
+    <% end %>
+  </figure>
+<% end %>
+<% if with_lightbox && images.any? %>
+  <template data-hw-lightbox-target="template">
+    <%= render HotwireBits::LightboxComponent.new(images: images, current_index: 0) %>
+  </template>
+<% end %>
+</div>

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

@@ -0,0 +1,14 @@
+<%# Grid component — ERB partial %>
+<%# Usage: render 'hotwirebits/grid', columns: 3, gap: 4 %>
+
+<%
+  columns     = local_assigns.fetch(:columns, 3)
+  gap         = local_assigns.fetch(:gap, 4)
+  extra_class = local_assigns[:class]
+
+  grid_cls = ["grid grid-cols-#{columns} gap-#{gap}", extra_class].compact.join(" ")
+%>
+
+<div class="<%= grid_cls %>">
+  <% if block_given? %><%= yield %><% end %>
+</div>

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

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

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

@@ -0,0 +1,28 @@
+<%# Header component — ERB partial %>
+<%# Usage: render 'hotwirebits/header', ... %>
+
+<header class="<%= header_classes %>" <%= tag.attributes(local_assigns) %>>
+  <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 nav_items.any? %>
+      <nav class="flex items-center gap-6 text-sm">
+        <% nav_items.each do |item| %>
+          <a href="<%= item[:href] %>"
+             class="<%= merge_classes(
+               '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">
+      <%= actions if actions? %>
+    </div>
+  </div>
+</header>

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

@@ -0,0 +1,36 @@
+<%# HeaderSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/header_section', ... %>
+
+<header class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if breadcrumbs.any? %>
+    <nav aria-label="Breadcrumb" class="mb-4">
+      <ol class="flex items-center space-x-2 text-sm text-hw-muted-foreground">
+        <% breadcrumbs.each_with_index do |item, idx| %>
+          <% if idx > 0 %>
+            <li class="text-hw-muted-foreground/50">/</li>
+          <% end %>
+          <li>
+            <% if item[:href] && idx < breadcrumbs.size - 1 %>
+              <a href="<%= item[:href] %>" class="hover:text-hw-foreground transition-colors"><%= item[:label] %></a>
+            <% else %>
+              <span class="font-medium text-hw-foreground"><%= item[:label] %></span>
+            <% end %>
+          </li>
+        <% end %>
+      </ol>
+    </nav>
+  <% end %>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-bold text-hw-foreground"><%= title %></h1>
+      <% if subtitle %>
+        <p class="mt-1 text-sm text-hw-muted-foreground"><%= subtitle %></p>
+      <% end %>
+    </div>
+    <% if actions? %>
+      <div class="flex items-center gap-2 shrink-0">
+        <%= actions %>
+      </div>
+    <% end %>
+  </div>
+</header>

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

@@ -0,0 +1,38 @@
+<%# Hero component — ERB partial %>
+<%# Usage: render 'hotwirebits/hero', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="<%= inner_classes %>">
+    <div class="flex flex-col gap-4 <%= 'md:max-w-xl' if variant == :split %>">
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-hw-foreground">
+        <%= title %>
+      </h1>
+      <% if subtitle %>
+        <p class="text-lg md:text-xl text-hw-muted-foreground max-w-2xl">
+          <%= subtitle %>
+        </p>
+      <% end %>
+      <% if primary_cta || secondary_cta %>
+        <div class="flex flex-wrap gap-3 mt-2 <%= 'justify-center' unless variant == :split %>">
+          <% if primary_cta %>
+            <a href="<%= primary_cta[:href] %>"
+               class="inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-11 px-6 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+              <%= primary_cta[:label] %>
+            </a>
+          <% end %>
+          <% if secondary_cta %>
+            <a href="<%= secondary_cta[:href] %>"
+               class="inline-flex items-center justify-center rounded-lg border border-hw-border bg-hw-background h-11 px-6 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors">
+              <%= secondary_cta[:label] %>
+            </a>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% if image_url %>
+      <div class="mt-8 md:mt-0 w-full <%= variant == :split ? 'md:w-1/2' : 'max-w-3xl' %>">
+        <img src="<%= image_url %>" alt="" class="rounded-xl shadow-lg w-full object-cover">
+      </div>
+    <% end %>
+  </div>
+</section>

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

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

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

@@ -0,0 +1,13 @@
+<%# Hover3dCard component — ERB partial %>
+<%# Usage: render 'hotwirebits/hover_3d_card', ... %>
+
+<div class="<%= container_classes %>" data-controller="hover-3d" data-hover-3d-intensity-value="<%= intensity %>" <%= tag.attributes(local_assigns) %>>
+  <div class="rounded-xl border border-hw-border bg-hw-card p-6 shadow-sm transition-transform duration-300 [transform-style:preserve-3d] group-hover:[transform:rotateX(var(--rx))_rotateY(var(--ry))]"
+       data-hover-3d-target="card">
+    <% if content? %>
+      <%= content %>
+    <% else %>
+      <%= yield %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,22 @@
+<%# HoverCard component — ERB partial %>
+<%# Usage: render 'hotwirebits/hover_card', ... %>
+
+<div class="relative inline-block"
+     data-controller="hw-hover-card"
+     data-action="mouseenter->hw-hover-card#show mouseleave->hw-hover-card#hide">
+  <div data-hw-hover-card-target="trigger">
+    <% if trigger? %>
+      <%= trigger %>
+    <% else %>
+      <a href="#" class="text-sm font-medium underline-offset-4 hover:underline">Hover</a>
+    <% end %>
+  </div>
+  <div class="<%= card_classes %>"
+       data-hw-hover-card-target="content"
+       data-state="closed"
+       data-side="bottom"
+       hidden
+       <%= tag.attributes(local_assigns) %>>
+    <%= content %>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+<%# HoverGallery component — ERB partial %>
+<%# Usage: render 'hotwirebits/hover_gallery', ... %>
+
+<div class="relative overflow-hidden rounded-lg" style="<%= gallery_style %>" <%= tag.attributes(local_assigns) %>>
+  <% images.each_with_index do |image, idx| %>
+    <div class="absolute inset-0 transition-opacity duration-500 opacity-0 hover:opacity-100"
+         data-controller="hover-gallery"
+         data-hover-gallery-index-value="<%= idx %>">
+      <img src="<%= image[:src] %>" alt="<%= image[:alt] || '' %>" class="h-full w-full object-cover">
+    </div>
+  <% end %>
+  <% if images.any? %>
+    <div class="absolute inset-0">
+      <img src="<%= images.first[:src] %>" alt="<%= images.first[:alt] || '' %>" class="h-full w-full object-cover">
+    </div>
+    <div class="absolute inset-0 flex">
+      <% images.each_with_index do |image, idx| %>
+        <div class="flex-1 relative group"
+             onmouseenter="this.closest('[data-controller]').querySelectorAll('[data-hover-gallery-index-value]').forEach(el => { el.style.opacity = el.dataset.hoverGalleryIndexValue == #{idx} ? '1' : '0' })">
+          <img src="<%= image[:src] %>" alt="<%= image[:alt] || '' %>"
+               class="absolute inset-0 h-full w-full object-cover transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,12 @@
+<%# IconField component — ERB partial %>
+<%# Usage: render 'hotwirebits/icon_field', ... %>
+
+<div class="relative" <%= tag.attributes(local_assigns) %>>
+  <% if position == :left %>
+    <div class="absolute top-1/2 -translate-y-1/2 left-3 text-hw-muted-foreground pointer-events-none"><%= safe_svg(icon) %></div>
+  <% end %>
+  <%= content %>
+  <% if position == :right %>
+    <div class="absolute top-1/2 -translate-y-1/2 right-3 text-hw-muted-foreground pointer-events-none"><%= safe_svg(icon) %></div>
+  <% end %>
+</div>

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

@@ -0,0 +1,7 @@
+<%# IftaLabel component — ERB partial %>
+<%# Usage: render 'hotwirebits/ifta_label', ... %>
+
+<div class="relative" <%= tag.attributes(local_assigns) %>>
+  <div class="peer"><%= content %></div>
+  <label for="<%= name %>" class="absolute left-3 top-0 -translate-y-1/2 bg-hw-background px-1 text-xs font-medium text-hw-muted-foreground transition-all peer-focus:text-hw-primary"><%= label %></label>
+</div>

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

@@ -0,0 +1,22 @@
+<%# Image component — ERB partial %>
+<%# Usage: render 'hotwirebits/image', ... %>
+
+<figure class="<%= figure_classes %>" <%= tag.attributes(local_assigns) %>>
+  <img
+    src="<%= src %>"
+    alt="<%= alt %>"
+    loading="lazy"
+    <% if width %>width="<%= width %>"<% end %>
+    <% if height %>height="<%= height %>"<% end %>
+    onerror="<%= fallback ? "this.src='#{fallback}'" : 'this.style.display=\\'none\\'' %>"
+    class="rounded-lg w-full h-auto object-cover"
+    <% if zoomable %>
+      data-controller="hw-image"
+      data-action="click->hw-image#zoom"
+    data-hw-image-src-value="<%= src %>"
+  <% end %>
+  />
+  <% if caption %>
+    <figcaption class="mt-2 text-center text-sm text-hw-muted-foreground"><%= caption %></figcaption>
+  <% end %>
+</figure>

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

@@ -0,0 +1,24 @@
+<%# ImageCompare component — ERB partial %>
+<%# Usage: render 'hotwirebits/image_compare', ... %>
+
+<div class="<%= container_classes %>" data-controller="hw-image-compare" data-hw-image-compare-orientation-value="<%= orientation %>" <%= tag.attributes(local_assigns) %>>
+  <div class="relative w-full" style="padding-bottom: 56.25%;">
+    <img src="<%= after_src %>" alt="<%= after_label %>" class="absolute inset-0 h-full w-full object-cover">
+    <div class="absolute inset-0 overflow-hidden" data-hw-image-compare-target="before" style="<%= orientation == :horizontal ? 'width: 50%;' : 'height: 50%;' %>">
+      <img src="<%= before_src %>" alt="<%= before_label %>" class="absolute inset-0 h-full w-full object-cover" style="<%= orientation == :horizontal ? 'min-width: 100vw; max-width: none;' : 'min-height: 100vh; max-height: none;' %>">
+    </div>
+    <input type="range" min="0" max="100" value="50"
+           class="absolute inset-0 z-10 m-0 h-full w-full cursor-<%= orientation == :horizontal ? 'ew' : 'ns' %>-resize opacity-0"
+           data-action="input->hw-image-compare#slide">
+    <div class="absolute z-20 bg-white shadow-lg <%= orientation == :horizontal ? 'top-0 h-full w-0.5' : 'left-0 w-full h-0.5' %>"
+         data-hw-image-compare-target="handle" style="<%= orientation == :horizontal ? 'left: 50%;' : 'top: 50%;' %>">
+      <div class="absolute top-1/2 left-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white shadow-lg">
+        <svg class="h-5 w-5 text-hw-foreground" 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="<%= orientation == :horizontal ? 'M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9' : 'M15 8.25l-3-3m0 0l-3 3m3-3v12' %>"/>
+        </svg>
+      </div>
+    </div>
+    <span class="absolute bottom-3 left-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= before_label %></span>
+            <span class="absolute bottom-3 right-3 z-20 rounded bg-black/60 px-2 py-1 text-xs font-medium text-hw-primary-foreground"><%= after_label %></span>
+          </div>
+        </div>

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

@@ -0,0 +1,11 @@
+<%# ImageZoom component — ERB partial %>
+<%# Usage: render 'hotwirebits/image_zoom', ... %>
+
+<div class="relative overflow-hidden rounded-lg border border-hw-border"
+     style="<%= container_style %>"
+     data-controller="hw-image-zoom"
+     data-hw-image-zoom-zoom-level-value="<%= zoom_level %>"
+     data-action="mousemove->hw-image-zoom#zoom mouseleave->hw-image-zoom#reset"
+  <%= tag.attributes(local_assigns) %>>
+  <img src="<%= src %>" alt="<%= alt %>" class="w-full h-full object-cover transition-transform duration-200" data-hw-image-zoom-target="image">
+</div>

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

@@ -0,0 +1,14 @@
+<%# Incentive component — ERB partial %>
+<%# Usage: render 'hotwirebits/incentive', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-hw-primary/10 text-hw-primary">
+    <svg class="h-7 w-7" 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="<%= icon %>"/>
+    </svg>
+  </div>
+  <h3 class="text-base font-semibold text-hw-foreground"><%= title %></h3>
+        <% if description %>
+          <p class="mt-1.5 text-sm text-hw-muted-foreground"><%= description %></p>
+        <% end %>
+      </div>

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

@@ -0,0 +1,9 @@
+<%# Indicator component — ERB partial %>
+<%# Usage: render 'hotwirebits/indicator', ... %>
+
+<div class="relative inline-flex">
+  <%= content %>
+  <div class="absolute flex items-center justify-center <%= color || 'bg-hw-primary' %> <%= POSITIONS[position] || '-top-1 -right-1' %>" <%= tag.attributes(local_assigns) %>>
+    <%= yield %>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+<%# IndicatorBadge component — ERB partial %>
+<%# Usage: render 'hotwirebits/indicator_badge', ... %>
+
+<div class="<%= wrapper_classes %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+  <span class="<%= badge_classes %>">
+    <% unless dot %>
+      <%= content %>
+    <% end %>
+  </span>
+</div>

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

@@ -0,0 +1,53 @@
+<%# InlineEdit component — ERB partial %>
+<%# Usage: render 'hotwirebits/inline_edit', ... %>
+
+<div class="group relative inline-flex items-center gap-2"
+     data-controller="hw-inline-edit"
+     <%= tag.attributes(local_assigns) %>>
+  <span class="text-sm text-hw-foreground"
+        data-hw-inline-edit-target="display"
+        data-action="click->hw-inline-edit#edit"><%= value || placeholder || 'Click to edit' %></span>
+  <button type="button"
+          class="opacity-0 group-hover:opacity-100 h-6 w-6 inline-flex items-center justify-center rounded hover:bg-hw-accent text-hw-muted-foreground transition-opacity cursor-pointer"
+          data-action="click->hw-inline-edit#edit"
+    aria-label="Edit">
+    <svg class="h-3.5 w-3.5" 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="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"/>
+    </svg>
+  </button>
+  <div class="hidden absolute top-full left-0 mt-1 z-10" data-hw-inline-edit-target="form">
+    <div class="flex items-center gap-2 rounded-lg border border-hw-border bg-hw-popover p-2 shadow-lg">
+      <% if type == :select %>
+        <select name="<%= name %>"
+                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-hw-inline-edit-target="input">
+          <% options.each do |opt| %>
+            <option value="<%= opt[:value] %>" <%= 'selected' if opt[:value].to_s == value.to_s %>><%= opt[:label] %></option>
+            <% end %>
+          </select>
+        <% elsif type == :textarea %>
+          <textarea name="<%= name %>"
+                  placeholder="<%= placeholder %>"
+                  class="w-64 h-20 rounded-md border border-hw-input bg-hw-background px-2 py-1.5 text-sm text-hw-foreground resize-none focus:outline-none focus:ring-2 focus:ring-hw-ring"
+                  data-hw-inline-edit-target="input"><%= value %></textarea>
+        <% else %>
+          <input type="text"
+               name="<%= name %>"
+               value="<%= value %>"
+               placeholder="<%= placeholder %>"
+               class="h-8 w-48 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-hw-inline-edit-target="input">
+        <% end %>
+        <button type="button"
+              class="h-8 w-8 inline-flex items-center justify-center rounded-md bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90 cursor-pointer"
+              data-action="click->hw-inline-edit#save">
+          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+        </button>
+        <button type="button"
+              class="h-8 w-8 inline-flex items-center justify-center rounded-md hover:bg-hw-accent text-hw-muted-foreground cursor-pointer"
+              data-action="click->hw-inline-edit#cancel">
+          <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+        </button>
+      </div>
+    </div>
+  </div>

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

@@ -0,0 +1,9 @@
+<%# Inplace component — ERB partial %>
+<%# Usage: render 'hotwirebits/inplace', ... %>
+
+<div class="inline-block" data-controller="hw-inplace" <%= tag.attributes(local_assigns) %>>
+  <div class="cursor-pointer rounded-md px-2 py-1 hover:bg-hw-accent transition-colors min-h-[2rem] <%= display_class %>" data-action="<%= 'click->hw-inplace#edit' unless disabled %>" data-hw-inplace-target="display">
+    <%= value.presence || tag.span(placeholder, class: 'text-hw-muted-foreground') %>
+  </div>
+  <input type="text" name="<%= name %>" value="<%= value %>" class="hidden w-full rounded-md border border-hw-input bg-hw-background px-2 py-1 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring" data-hw-inplace-target="input" data-action="blur->hw-inplace#save keydown->hw-inplace#keydown">
+</div>

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

@@ -0,0 +1,33 @@
+<%# Input component — ERB partial %>
+<%# Usage: render 'hotwirebits/input', name: "email", placeholder: "Email", type: :text %>
+
+<%
+  type         = local_assigns.fetch(:type, :text)
+  name         = local_assigns.fetch(:name, "")
+  value        = local_assigns.fetch(:value, "")
+  placeholder  = local_assigns.fetch(:placeholder, "")
+  disabled     = local_assigns.fetch(:disabled, false)
+  readonly     = local_assigns.fetch(:readonly, false)
+  required     = local_assigns.fetch(:required, false)
+  autocomplete = local_assigns.fetch(:autocomplete, "off")
+  icon         = local_assigns[:icon]
+  icon_position = local_assigns.fetch(:icon_position, :left)
+
+  input_cls = "flex h-10 w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm ring-offset-hw-background 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"
+  input_cls += " pl-10" if icon && icon_position == :left
+  input_cls += " pr-10" if icon && icon_position == :right
+%>
+
+<% if icon %>
+  <div class="relative">
+    <% if icon_position == :left %>
+      <div class="absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground"><%= icon %></div>
+    <% end %>
+    <input type="<%= type %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" <%= 'disabled' if disabled %> <%= 'readonly' if readonly %> <%= 'required' if required %> autocomplete="<%= autocomplete %>" class="<%= input_cls %>">
+    <% if icon_position == :right %>
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground"><%= icon %></div>
+    <% end %>
+  </div>
+<% else %>
+  <input type="<%= type %>" name="<%= name %>" value="<%= value %>" placeholder="<%= placeholder %>" <%= 'disabled' if disabled %> <%= 'readonly' if readonly %> <%= 'required' if required %> autocomplete="<%= autocomplete %>" class="<%= input_cls %>">
+<% end %>

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

@@ -0,0 +1,12 @@
+<%# InputGroup component — ERB partial %>
+<%# Usage: render 'hotwirebits/input_group', ... %>
+
+<div class="flex [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px" <%= tag.attributes(local_assigns) %>>
+  <% if addon_before %>
+    <span class="inline-flex items-center rounded-md border border-hw-input bg-hw-muted px-3 text-sm text-hw-muted-foreground whitespace-nowrap"><%= addon_before %></span>
+  <% end %>
+  <%= content %>
+  <% if addon_after %>
+    <span class="inline-flex items-center rounded-md border border-hw-input bg-hw-muted px-3 text-sm text-hw-muted-foreground whitespace-nowrap"><%= addon_after %></span>
+  <% end %>
+</div>

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

@@ -0,0 +1,17 @@
+<%# InputNumber component — ERB partial %>
+<%# Usage: render 'hotwirebits/input_number', ... %>
+
+<div class="inline-flex items-center rounded-md border border-hw-input" data-controller="hw-input-number" <%= tag.attributes(local_assigns) %>>
+  <button type="button" <%= 'disabled' if disabled %> class="<%= merge_classes('inline-flex items-center justify-center text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors disabled:pointer-events-none disabled:opacity-50', BUTTON_SIZES[size] || 'h-9 w-9') %>" data-action="click->hw-input-number#decrement">
+    <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="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div class="relative flex items-center">
+    <% if currency %>
+      <span class="absolute left-2 text-xs text-hw-muted-foreground pointer-events-none"><%= currency %></span>
+    <% end %>
+    <input type="number" name="<%= name %>" value="<%= value %>" min="<%= min %>" max="<%= max %>" step="<%= step %>" <%= 'disabled' if disabled %> class="<%= merge_classes('w-16 bg-transparent text-center text-hw-foreground outline-none border-x border-hw-input disabled:cursor-not-allowed disabled:opacity-50 appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', currency ? 'pl-7' : '', SIZES[size] || 'h-9 text-sm') %>" data-hw-input-number-target="input">
+  </div>
+  <button type="button" <%= 'disabled' if disabled %> class="<%= merge_classes('inline-flex items-center justify-center text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors disabled:pointer-events-none disabled:opacity-50', BUTTON_SIZES[size] || 'h-9 w-9') %>" data-action="click->hw-input-number#increment">
+    <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="M5 15l7-7 7 7"/></svg>
+  </button>
+</div>

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

@@ -0,0 +1,9 @@
+<%# InputOtp component — ERB partial %>
+<%# Usage: render 'hotwirebits/input_otp', ... %>
+
+<div class="flex items-center gap-2" data-controller="hw-otp">
+  <input type="hidden" name="<%= name %>" value="<%= value %>" data-hw-otp-target="hidden">
+  <% length.times do |i| %>
+    <input type="text" maxlength="1" inputmode="<%= numeric_only ? 'numeric' : 'text' %>" <%= 'disabled' if disabled %> value="<%= value[i] %>" class="h-10 w-10 text-center text-lg font-semibold rounded-md border border-hw-input bg-hw-background 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="input->hw-otp#input keydown->hw-otp#keydown" data-index="<%= i %>" <%= tag.attributes(local_assigns) %>>
+  <% end %>
+</div>