hotwirebits 0.1.0

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

@@ -0,0 +1,44 @@
+<%# Tabs component — ERB partial %>
+<%# Usage: render 'hotwirebits/tabs', tabs: [{label: "Tab 1"}, {label: "Tab 2"}], active: 0 %>
+
+<%
+  tabs        = local_assigns.fetch(:tabs, [])
+  active      = local_assigns.fetch(:active, 0)
+  extra_class = local_assigns[:class]
+
+  # Assign IDs to tabs if not present
+  tabs = tabs.each_with_index.map { |t, i| t.is_a?(Hash) ? t.merge(id: t.fetch(:id, i)) : { label: t.to_s, id: i } }
+
+  container_cls = extra_class || ""
+  list_cls = "inline-flex h-10 items-center justify-center rounded-md bg-hw-muted p-1 text-hw-muted-foreground"
+%>
+
+<div class="<%= container_cls %>" data-controller="hw-tabs" data-hw-tabs-active-value="<%= active %>">
+  <div role="tablist" class="<%= list_cls %>">
+    <% tabs.each do |tab| %>
+      <button type="button"
+              role="tab"
+              id="tab-<%= tab[:id] %>"
+              data-hw-tabs-target="tab"
+              data-action="click->hw-tabs#select"
+              data-tab-id="<%= tab[:id] %>"
+              aria-controls="panel-<%= tab[:id] %>"
+              aria-selected="<%= tab[:id] == active %>"
+              class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-hw-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 <%= tab[:id] == active ? 'bg-hw-background text-hw-foreground shadow-sm' : '' %>">
+        <%= tab[:label] %>
+      </button>
+    <% end %>
+  </div>
+  <% tabs.each do |tab| %>
+    <div role="tabpanel"
+         id="panel-<%= tab[:id] %>"
+         data-hw-tabs-target="panel"
+         data-tab-id="<%= tab[:id] %>"
+         aria-labelledby="tab-<%= tab[:id] %>"
+         class="<%= tab[:id] == active ? '' : 'hidden' %> pt-4">
+      <% if tab[:content] %>
+        <%= tab[:content] %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,20 @@
+<%# Tag component — ERB partial %>
+<%# Usage: render 'hotwirebits/tag', label: "Feature", color: :default %>
+
+<%
+  label = local_assigns.fetch(:label, "")
+  color = local_assigns.fetch(:color, :default)
+
+  color_cls = case color
+              when :primary then "bg-hw-primary/10 text-hw-primary border-hw-primary/20"
+              when :success then "bg-green-50 text-green-700 border-green-200"
+              when :warning then "bg-yellow-50 text-yellow-700 border-yellow-200"
+              when :danger, :destructive then "bg-red-50 text-red-700 border-red-200"
+              else "bg-hw-muted text-hw-muted-foreground border-hw-border"
+              end
+  tag_cls = "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium #{color_cls}"
+%>
+
+<span class="<%= tag_cls %>">
+  <%= label %>
+</span>

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

@@ -0,0 +1,17 @@
+<%# TagInput component — ERB partial %>
+<%# Usage: render 'hotwirebits/tag_input', ... %>
+
+<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-tag-input" data-hw-tag-input-max-value="<%= max %>" data-hw-tag-input-pattern-value="<%= pattern %>" <%= tag.attributes(local_assigns) %>>
+  <% 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-tag-input#remove" data-hw-tag-input-value-param="<%= 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>
+  <% end %>
+  <input type="text" placeholder="<%= placeholder %>" <%= 'disabled' if disabled || (max && value.size >= max) %> <%= 'pattern' if pattern %> class="flex-1 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground outline-none min-w-[80px]" data-action="keydown->hw-tag-input#keydown blur->hw-tag-input#blur" data-hw-tag-input-target="input">
+  <% value.each do |v| %>
+    <input type="hidden" name="<%= name %>[]" value="<%= v %>">
+  <% end %>
+</div>

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

@@ -0,0 +1,42 @@
+<%# TeamSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/team_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if title %>
+      <h2 class="text-2xl md:text-3xl font-bold text-hw-foreground text-center mb-12"><%= title %></h2>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% members.each do |member| %>
+        <div class="flex flex-col items-center text-center rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if member[:avatar] %>
+            <img src="<%= member[:avatar] %>" alt="<%= member[:name] %>" class="h-20 w-20 rounded-full object-cover mb-4">
+          <% else %>
+            <div class="flex h-20 w-20 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground text-xl font-semibold mb-4">
+              <%= member[:name].to_s.split.map(&:first).join %>
+            </div>
+          <% end %>
+          <h3 class="text-base font-semibold text-hw-foreground"><%= member[:name] %></h3>
+          <% if member[:role] %>
+            <p class="text-sm text-hw-primary mt-0.5"><%= member[:role] %></p>
+          <% end %>
+          <% if member[:bio] %>
+            <p class="text-sm text-hw-muted-foreground mt-2 leading-relaxed"><%= member[:bio] %></p>
+          <% end %>
+          <% if member[:social_links]&.any? %>
+            <div class="flex items-center gap-3 mt-4">
+              <% member[:social_links].each do |link| %>
+                <a href="<%= link[:href] %>" class="text-hw-muted-foreground hover:text-hw-foreground transition-colors" target="_blank" rel="noopener noreferrer">
+                  <span class="sr-only"><%= link[:label] %></span>
+                  <% if link[:icon] %>
+                    <span class="h-5 w-5 inline-block"><%= safe_svg(link[:icon]) %></span>
+                  <% end %>
+                </a>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,24 @@
+<%# Terminal component — ERB partial %>
+<%# Usage: render 'hotwirebits/terminal', ... %>
+
+<div class="rounded-lg border border-hw-border bg-hw-foreground overflow-hidden font-mono text-sm" <%= tag.attributes(local_assigns) %>>
+  <div class="flex items-center gap-2 px-4 py-2.5 bg-hw-foreground/90 border-b border-zinc-800">
+    <div class="flex gap-1.5">
+      <div class="h-3 w-3 rounded-full bg-hw-destructive"></div>
+      <div class="h-3 w-3 rounded-full bg-hw-warning"></div>
+      <div class="h-3 w-3 rounded-full bg-hw-success"></div>
+    </div>
+    <span class="text-xs text-hw-muted-foreground ml-2"><%= title %></span>
+  </div>
+  <div class="p-4 space-y-1 min-h-[100px]">
+    <% lines.each do |line| %>
+      <div>
+        <span class="text-hw-success"><%= line[:prompt] || '$' %></span>
+        <span class="text-hw-background ml-1"><%= line[:command] %></span>
+        <% if line[:output] %>
+          <div class="text-hw-muted-foreground mt-0.5 pl-0"><%= line[:output] %></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<%# Testimonial component — ERB partial %>
+<%# Usage: render 'hotwirebits/testimonial', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <% if rating %>
+    <div class="flex gap-0.5 mb-3">
+      <% 5.times do |i| %>
+        <svg class="h-4 w-4 <%= i < rating ? 'text-hw-warning' : 'text-hw-muted' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"/>
+        </svg>
+      <% end %>
+    </div>
+  <% end %>
+  <blockquote class="text-hw-foreground">
+    <p class="text-base leading-relaxed">"<%= quote %>"</p>
+  </blockquote>
+  <% if author %>
+    <div class="mt-4 flex items-center gap-3">
+      <% if avatar %>
+        <img src="<%= avatar %>" alt="<%= author %>" class="h-10 w-10 rounded-full object-cover">
+      <% end %>
+      <div>
+        <p class="text-sm font-semibold text-hw-foreground"><%= author %></p>
+        <% if role || company %>
+          <p class="text-sm text-hw-muted-foreground">
+            <%= [role, company].compact.join(', ') %>
+          </p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,37 @@
+<%# TestimonialsSection component — ERB partial %>
+<%# Usage: render 'hotwirebits/testimonials_section', ... %>
+
+<section class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if title %>
+      <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground text-center mb-10"><%= title %></h2>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% testimonials.each do |t| %>
+        <div class="rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if t[:rating] %>
+            <div class="flex gap-0.5 mb-3">
+              <% 5.times do |i| %>
+                <svg class="h-4 w-4 <%= i < t[:rating] ? 'text-hw-warning' : 'text-hw-muted' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"/>
+                </svg>
+              <% end %>
+            </div>
+          <% end %>
+          <blockquote class="text-sm text-hw-foreground leading-relaxed">"<%= t[:quote] %>"</blockquote>
+          <div class="mt-4 flex items-center gap-3">
+            <% if t[:avatar] %>
+              <img src="<%= t[:avatar] %>" alt="<%= t[:author] %>" class="h-9 w-9 rounded-full object-cover">
+            <% end %>
+            <div>
+              <p class="text-sm font-semibold text-hw-foreground"><%= t[:author] %></p>
+              <% if t[:role] %>
+                <p class="text-xs text-hw-muted-foreground"><%= t[:role] %></p>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,6 @@
+<%# TextGradient component — ERB partial %>
+<%# Usage: render 'hotwirebits/text_gradient', ... %>
+
+<span class="<%= gradient_class %> bg-clip-text text-transparent font-bold inline-block" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</span>

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

@@ -0,0 +1,10 @@
+<%# TextRotate component — ERB partial %>
+<%# Usage: render 'hotwirebits/text_rotate', ... %>
+
+<span class="<%= wrapper_classes %>" data-controller="text-rotate" data-text-rotate-interval-value="<%= interval %>" data-text-rotate-effect-value="<%= effect %>" <%= tag.attributes(local_assigns) %>>
+  <% texts.each_with_index do |text, idx| %>
+    <span class="block transition-all duration-500 <%= idx == 0 ? '' : effect_classes %>"
+          data-text-rotate-target="item"
+          data-index="<%= idx %>"><%= text %></span>
+<% end %>
+</span>

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

@@ -0,0 +1,17 @@
+<%# Textarea component — ERB partial %>
+<%# Usage: render 'hotwirebits/textarea', name: "bio", placeholder: "Bio" %>
+
+<%
+  name       = local_assigns.fetch(:name, "")
+  placeholder = local_assigns.fetch(:placeholder, "")
+  value      = local_assigns.fetch(:value, "")
+  rows       = local_assigns.fetch(:rows, 3)
+  disabled   = local_assigns.fetch(:disabled, false)
+  readonly   = local_assigns.fetch(:readonly, false)
+  required   = local_assigns.fetch(:required, false)
+  max_length = local_assigns[:max_length]
+
+  textarea_cls = "flex min-h-[80px] 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"
+%>
+
+<textarea name="<%= name %>" placeholder="<%= placeholder %>" rows="<%= rows %>" <%= 'disabled' if disabled %> <%= 'readonly' if readonly %> <%= 'required' if required %> <%= "maxlength=\"#{max_length}\"" if max_length %> class="<%= textarea_cls %>"><%= value %></textarea>

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

@@ -0,0 +1,16 @@
+<%# ThemeController component — ERB partial %>
+<%# Usage: render 'hotwirebits/theme_controller', ... %>
+
+<div data-controller="hw-theme" class="inline-flex items-center gap-2" <%= tag.attributes(local_assigns) %>>
+  <button type="button"
+          data-action="click->hw-theme#toggle"
+    class="inline-flex items-center gap-2 rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2">
+    <svg data-hw-theme-target="lightIcon" 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="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>
+    </svg>
+    <svg data-hw-theme-target="darkIcon" class="h-4 w-4 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>
+    </svg>
+    <span data-hw-theme-target="label"><%= light_label %></span>
+  </button>
+</div>

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

@@ -0,0 +1,6 @@
+<%# ThemeIcon component — ERB partial %>
+<%# Usage: render 'hotwirebits/theme_icon', ... %>
+
+<span class="inline-flex items-center justify-center <%= SIZES[size] || 'h-5 w-5' %>" <%= tag.attributes(local_assigns) %>>
+  <%= content %>
+</span>

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

@@ -0,0 +1,30 @@
+<%# ThemeSelector component — ERB partial %>
+<%# Usage: render 'hotwirebits/theme_selector', ... %>
+
+<div class="relative" data-controller="hw-theme-selector" <%= tag.attributes(local_assigns) %>>
+  <button type="button"
+          class="inline-flex h-9 items-center gap-2 rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+          data-action="click->hw-theme-selector#toggle click@window->hw-theme-selector#closeOnClickOutside">
+    <svg class="h-4 w-4 text-hw-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+    </svg>
+    <span><%= current_theme&.capitalize || 'Theme' %></span>
+    <svg class="h-4 w-4 text-hw-muted-foreground" 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>
+  </button>
+  <div data-hw-theme-selector-target="menu" class="hidden absolute right-0 top-full mt-1 z-50 min-w-[12rem] overflow-hidden rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md">
+    <% themes.each do |theme| %>
+      <button type="button"
+              class="relative flex w-full cursor-pointer select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground <%= current_theme == theme[:name] ? 'bg-hw-accent text-hw-accent-foreground' : '' %>"
+              data-theme="<%= theme[:name] %>"
+              data-action="click->hw-theme-selector#select">
+        <% if theme[:preview_color] %>
+          <span class="h-5 w-5 shrink-0 rounded-full border border-hw-border" style="background-color: <%= theme[:preview_color] %>;"></span>
+        <% end %>
+        <span><%= theme[:name].to_s.capitalize %></span>
+        <% if current_theme == theme[:name] %>
+          <svg class="ml-auto h-4 w-4 text-hw-primary" 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>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<%# TimePicker component — ERB partial %>
+<%# Usage: render 'hotwirebits/time_picker', ... %>
+
+<div data-controller="hw-time-picker" data-hw-time-picker-format-value="<%= time_format %>" <%= tag.attributes(local_assigns) %>>
+  <% if twelve_hour? %>
+    <div class="flex items-center gap-2">
+      <input type="text"
+             name="<%= name %>"
+             value="<%= value %>"
+             placeholder="12:00"
+             pattern="(0?[1-9]|1[0-2]):[0-5][0-9]"
+             <%= 'disabled' if disabled %>
+             class="<%= input_classes %>"
+             data-hw-time-picker-target="input">
+      <select class="h-9 rounded-md border border-hw-input bg-hw-background px-2 text-sm text-hw-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2"
+              data-action="change->hw-time-picker#updateMeridiem"
+        data-hw-time-picker-target="meridiem"
+        <%= 'disabled' if disabled %>>
+        <option value="AM">AM</option>
+        <option value="PM">PM</option>
+      </select>
+    </div>
+  <% else %>
+    <input type="time"
+           name="<%= name %>"
+           value="<%= value %>"
+           step="<%= step * 60 %>"
+           <%= 'disabled' if disabled %>
+           class="<%= input_classes %>"
+           data-hw-time-picker-target="input">
+  <% end %>
+</div>

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

@@ -0,0 +1,27 @@
+<%# Timeline component — ERB partial %>
+<%# Usage: render 'hotwirebits/timeline', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <div class="border-l-2 border-hw-border ml-3">
+    <% items.each do |item| %>
+      <div class="relative pl-8 pb-8 last:pb-0">
+        <div class="absolute -left-[9px] top-0.5 h-4 w-4 rounded-full border-2 border-hw-border bg-hw-background flex items-center justify-center">
+          <% if item[:icon] %>
+            <span class="text-[10px] text-hw-muted-foreground"><%= item[:icon] %></span>
+          <% end %>
+        </div>
+        <div class="pt-0.5">
+          <div class="flex items-center gap-2">
+            <p class="text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+            <% if item[:time] %>
+              <span class="text-xs text-hw-muted-foreground"><%= item[:time] %></span>
+            <% end %>
+          </div>
+          <% if item[:description] %>
+            <p class="mt-1 text-sm text-hw-muted-foreground"><%= item[:description] %></p>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,52 @@
+<%# Toast component — ERB partial %>
+<%# Usage: render 'hotwirebits/toast', type: :success, title: "Saved", message: "OK" %>
+
+<%
+  type        = local_assigns.fetch(:type, :info)
+  title       = local_assigns[:title]
+  message     = local_assigns[:message]
+  description = local_assigns[:description] || message
+  dismissible = local_assigns.fetch(:dismissible, true)
+  duration    = local_assigns.fetch(:duration, 5000)
+  action      = local_assigns[:action]
+
+  variant_cls = case type
+                when :success then "border-green-200 bg-green-50 text-green-800"
+                when :warning then "border-yellow-200 bg-yellow-50 text-yellow-800"
+                when :error, :destructive then "border-red-200 bg-red-50 text-red-800"
+                else "border-hw-border bg-hw-background text-hw-foreground"
+                end
+  toast_cls = "relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 shadow-lg #{variant_cls}"
+%>
+
+<div data-controller="hw-toast" data-hw-toast-duration-value="<%= duration %>" class="group pointer-events-auto">
+  <div class="<%= toast_cls %>">
+    <div class="flex items-start gap-3">
+      <div class="grid gap-1">
+        <% if title %>
+          <div class="text-sm font-semibold"><%= title %></div>
+        <% end %>
+        <% if description %>
+          <div class="text-sm opacity-90"><%= description %></div>
+        <% end %>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <% if action.is_a?(Hash) && action[:url] %>
+        <a href="<%= action[:url] %>"
+           class="inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-hw-border bg-transparent px-3 text-sm font-medium">
+          <%= action[:label] %>
+        </a>
+      <% end %>
+      <% if dismissible %>
+        <button type="button"
+                class="absolute right-1 top-1 rounded-md p-1 text-hw-foreground/50 opacity-0 transition-opacity hover:text-hw-foreground focus:opacity-100 focus:outline-none group-hover:opacity-100"
+                data-action="click->hw-toast#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>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+<%# Toggle component — ERB partial %>
+<%# Usage: render 'hotwirebits/toggle', label: "Bold", pressed: false %>
+
+<%
+  label    = local_assigns.fetch(:label, "")
+  pressed  = local_assigns.fetch(:pressed, false)
+  disabled = local_assigns.fetch(:disabled, false)
+%>
+
+<button type="button" aria-pressed="<%= pressed %>" <%= 'disabled' if disabled %> class="inline-flex items-center justify-center rounded-md font-medium ring-offset-hw-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-hw-accent hover:text-hw-accent-foreground <%= pressed ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent' %> cursor-pointer h-9 px-3 text-sm">
+  <%= label %>
+</button>

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

@@ -0,0 +1,7 @@
+<%# ToggleButton component — ERB partial %>
+<%# Usage: render 'hotwirebits/toggle_button', ... %>
+
+<button type="button" aria-pressed="<%= pressed %>" <%= 'disabled' if disabled %> class="<%= button_classes %>" data-controller="hw-toggle-button" data-action="click->hw-toggle-button#toggle" <%= tag.attributes(local_assigns) %>>
+  <% if icon %><span class="h-4 w-4"><%= safe_svg(icon) %></span><% end %>
+  <% if label %><span><%= label %></span><% end %>
+</button>

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

@@ -0,0 +1,11 @@
+<%# ToggleButtonGroup component — ERB partial %>
+<%# Usage: render 'hotwirebits/toggle_button_group', ... %>
+
+<div class="<%= group_classes %>" data-controller="hw-toggle-group" role="group" aria-label="Toggle options" <%= tag.attributes(local_assigns) %>>
+  <% options.each_with_index do |opt, i| %>
+    <% pressed = selected.include?(opt[:value]) %>
+    <button type="button" aria-pressed="<%= pressed %>" <%= 'disabled' if disabled || opt[:disabled] %> class="<%= option_classes(pressed, i == options.size - 1, i == 0) %>" data-action="click->hw-toggle-group#select" data-value="<%= opt[:value] %>">
+      <span><%= opt[:label] %></span>
+    </button>
+  <% end %>
+</div>

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

@@ -0,0 +1,21 @@
+<%# Toolbar component — ERB partial %>
+<%# Usage: render 'hotwirebits/toolbar', ... %>
+
+<div class="inline-flex items-center rounded-md border border-hw-input bg-hw-background p-1 gap-0.5" role="toolbar" <%= tag.attributes(local_assigns) %>>
+  <% items.each_with_index do |item, idx| %>
+    <% if with_separator && idx > 0 %>
+      <div class="mx-1 h-4 w-px bg-hw-border" role="separator"></div>
+    <% end %>
+    <% if item[:href] %>
+      <a href="<%= item[:href] %>" class="inline-flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring" title="<%= item[:label] %>">
+        <% if item[:icon] %><span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span><% end %>
+        <% if item[:label] %><span class="text-sm"><%= item[:label] %></span><% end %>
+      </a>
+    <% else %>
+      <button type="button" class="inline-flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring" title="<%= item[:label] %>">
+        <% if item[:icon] %><span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span><% end %>
+        <% if item[:label] %><span class="text-sm"><%= item[:label] %></span><% end %>
+      </button>
+    <% end %>
+  <% end %>
+</div>

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

@@ -0,0 +1,26 @@
+<%# Tooltip component — ERB partial %>
+<%# Usage: render 'hotwirebits/tooltip', tip: "Help" do %><%# ? %><%# end %>
+
+<%
+  tip   = local_assigns.fetch(:tip, "")
+  delay = local_assigns.fetch(:delay, 200)
+  side  = local_assigns.fetch(:side, :top)
+
+  tooltip_cls = "absolute z-50 overflow-hidden rounded-md border border-hw-border bg-hw-popover px-3 py-1.5 text-sm text-hw-popover-foreground shadow-md"
+%>
+
+<div class="relative inline-block"
+     data-controller="hw-tooltip"
+     data-hw-tooltip-delay-value="<%= delay %>"
+     data-action="mouseenter->hw-tooltip#show mouseleave->hw-tooltip#hide focus->hw-tooltip#show blur->hw-tooltip#hide">
+  <div data-hw-tooltip-target="trigger">
+    <% if block_given? %><%= yield %><% end %>
+  </div>
+  <div class="<%= tooltip_cls %>"
+       data-hw-tooltip-target="content"
+       role="tooltip"
+       data-side="<%= side %>"
+       hidden>
+    <%= tip %>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+<%# TreeView component — ERB partial %>
+<%# Usage: render 'hotwirebits/tree_view', ... %>
+
+<div class="<%= container_classes %>" <%= tag.attributes(local_assigns) %>>
+  <ul class="list-none p-0 m-0" data-controller="hw-tree">
+    <% items.each do |item| %>
+      <%= render HotwireBits::TreeViewNodeComponent.new(item: item) %>
+    <% end %>
+  </ul>
+</div>
+<template data-hw-tree-target="template">
+  <li class="list-none">
+    <div class="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-hw-muted cursor-pointer text-sm"
+         data-action="click->hw-tree#toggle">
+      <%# Placeholder — rendered inline via node component %>
+    </div>
+  </li>
+</template>

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

@@ -0,0 +1,29 @@
+<%# TwoFactor component — ERB partial %>
+<%# Usage: render 'hotwirebits/two_factor', ... %>
+
+<div data-controller="hw-two-factor"
+     data-hw-two-factor-length-value="<%= length %>"
+     data-hw-two-factor-auto-submit-value="<%= auto_submit %>"
+     class="space-y-4"
+     <%= tag.attributes(local_assigns) %>>
+  <input type="hidden" name="<%= name %>" value="" data-hw-two-factor-target="hidden">
+  <div class="flex items-center justify-center gap-2">
+    <% length.times do |i| %>
+      <input type="text"
+             maxlength="1"
+             inputmode="numeric"
+             autocomplete="one-time-code"
+             class="h-12 w-12 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"
+             data-action="input->hw-two-factor#input keydown->hw-two-factor#keydown paste->hw-two-factor#paste"
+      data-index="<%= i %>">
+    <% end %>
+  </div>
+  <% if with_timer %>
+    <div class="text-center text-sm text-hw-muted-foreground">
+      <span data-hw-two-factor-target="timer"></span>
+      <% if resend_url %>
+        <a href="<%= resend_url %>" class="text-hw-primary hover:underline hidden" data-hw-two-factor-target="resend">Resend code</a>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,8 @@
+<%# TypingIndicator component — ERB partial %>
+<%# Usage: render 'hotwirebits/typing_indicator', ... %>
+
+<div class="flex items-center <%= gap_class %>" <%= tag.attributes(local_assigns) %>>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+</div>

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

@@ -0,0 +1,7 @@
+<%# Typography component — ERB partial %>
+<%# Usage: render 'hotwirebits/typography', ... %>
+
+<% tag_name = (as || :p).to_s %>
+<% styles = { h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", h2: "scroll-m-20 border-b border-hw-border pb-2 text-3xl font-semibold tracking-tight first:mt-0", h3: "scroll-m-20 text-2xl font-semibold tracking-tight", h4: "scroll-m-20 text-xl font-semibold tracking-tight", h5: "scroll-m-20 text-lg font-semibold tracking-tight", h6: "scroll-m-20 text-base font-semibold tracking-tight", p: "leading-7 [&:not(:first-child)]:mt-6", lead: "text-xl text-hw-muted-foreground", large: "text-lg font-semibold", small: "text-sm font-medium leading-none", muted: "text-sm text-hw-muted-foreground", blockquote: "mt-6 border-l-2 border-hw-border pl-6 italic", code: "relative rounded bg-hw-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", list: "my-6 ml-6 list-disc [&>li]:mt-2", mark: "bg-yellow-200 dark:bg-yellow-800 px-0.5 rounded" } %>
+<% style_key = (as || :p).to_sym %>
+<%= tag.public_send(tag_name, content, class: styles[style_key] || styles[:p], **extra_attrs) %>

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

@@ -0,0 +1,23 @@
+<%# Validator component — ERB partial %>
+<%# Usage: render 'hotwirebits/validator', ... %>
+
+<div data-controller="hw-validator"
+     data-hw-validator-field-value="<%= field %>"
+     data-hw-validator-rules-value="<%= rules.to_json %>"
+     data-hw-validator-message-value="<%= message %>"
+     class="space-y-1"
+     <%= tag.attributes(local_assigns) %>>
+  <div data-hw-validator-target="errors" class="text-xs text-hw-destructive hidden"></div>
+  <% if rules.any? %>
+    <ul class="space-y-0.5">
+      <% rules.each do |rule| %>
+        <li class="flex items-center gap-1.5 text-xs text-hw-muted-foreground" data-rule="<%= rule.is_a?(Hash) ? rule.keys.first : rule %>">
+          <svg class="h-3 w-3" data-hw-validator-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+          </svg>
+          <span><%= rule.is_a?(Hash) ? rule.values.first : rule.to_s.humanize %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>