hotwirebits 0.1.0

data/app/components/hotwirebits/hover_card_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HoverCardComponent < Base
+    renders_one :trigger
+
+    def initialize(align: :center, **attrs)
+      @align = align
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def card_classes
+      merge_classes(
+        "absolute z-50 w-64 rounded-md border border-hw-border bg-hw-popover p-4 text-hw-popover-foreground shadow-md",
+        "outline-none data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2",
+        "top-full mt-2",
+        align_classes,
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def align_classes
+      case @align
+      when :start then "left-0"
+      when :center then "left-1/2 -translate-x-1/2"
+      when :end then "right-0"
+      end
+    end
+  end
+end

data/app/components/hotwirebits/hover_gallery_component.html.erb

@@ -0,0 +1,23 @@
+<div class="relative overflow-hidden rounded-lg" style="<%= gallery_style %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @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/components/hotwirebits/hover_gallery_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HoverGalleryComponent < Base
+    def initialize(images: [], height: 300, **attrs)
+      @images = images
+      @height = height
+      @extra_attrs = attrs
+    end
+
+    def gallery_style
+      "height: #{@height}px"
+    end
+  end
+end

data/app/components/hotwirebits/icon_field_component.html.erb

@@ -0,0 +1,9 @@
+<div class="relative" <%= tag.attributes(@extra_attrs) %>>
+  <% 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/components/hotwirebits/icon_field_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class IconFieldComponent < Base
+    POSITIONS = {
+      left: "pr-3 pl-9",
+      right: "pl-3 pr-9"
+    }.freeze
+
+    def initialize(icon:, position: :left, **attrs)
+      @icon = icon
+      @position = position
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_wrapper_classes
+      merge_classes(
+        "[&>input]:pl-9 [&>select]:pl-9",
+        (@position == :right) ? "[&>input]:pr-9 [&>select]:pr-9" : ""
+      )
+    end
+
+    def icon_classes
+      (@position == :left) ? "left-3" : "right-3"
+    end
+
+    def icon_element
+      tag.div(class: merge_classes("absolute top-1/2 -translate-y-1/2 text-hw-muted-foreground pointer-events-none", icon_classes)) do
+        safe_svg(@icon)
+      end
+    end
+  end
+end

data/app/components/hotwirebits/ifta_label_component.html.erb

@@ -0,0 +1,4 @@
+<div class="relative" <%= tag.attributes(@extra_attrs) %>>
+  <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/components/hotwirebits/ifta_label_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class IftaLabelComponent < Base
+    def initialize(label:, name: nil, **attrs)
+      @label = label
+      @name = name
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/image_compare_component.html.erb

@@ -0,0 +1,21 @@
+<div class="<%= container_classes %>" data-controller="hw-image-compare" data-hw-image-compare-orientation-value="<%= @orientation %>" <%= tag.attributes(@extra_attrs) %>>
+  <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/components/hotwirebits/image_compare_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ImageCompareComponent < Base
+    def initialize(before_src:, after_src:, before_label: "Before", after_label: "After", orientation: :horizontal,
+      **attrs)
+      @before_src = before_src
+      @after_src = after_src
+      @before_label = before_label
+      @after_label = after_label
+      @orientation = orientation
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("relative overflow-hidden rounded-lg select-none", @extra_attrs.delete(:class))
+    end
+  end
+end

data/app/components/hotwirebits/image_component.html.erb

@@ -0,0 +1,22 @@
+<figure class="<%= figure_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%
+    onerror_value = @fallback ? "this.src='#{@fallback}'" : "this.style.display='none'"
+  %>
+  <img
+    src="<%= @src %>"
+    alt="<%= @alt %>"
+    loading="lazy"
+    <% if @width %>width="<%= @width %>"<% end %>
+    <% if @height %>height="<%= @height %>"<% end %>
+    onerror="<%= onerror_value %>"
+    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/components/hotwirebits/image_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ImageComponent < Base
+    def initialize(src:, alt:, caption: nil, fallback: nil, zoomable: false, width: nil, height: nil, **attrs)
+      @src = src
+      @alt = alt
+      @caption = caption
+      @fallback = fallback
+      @zoomable = zoomable
+      @width = width
+      @height = height
+      @extra_attrs = attrs
+    end
+
+    def figure_classes
+      merge_classes(
+        @zoomable ? "cursor-zoom-in" : "",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

data/app/components/hotwirebits/image_zoom_component.html.erb

@@ -0,0 +1,8 @@
+<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(@extra_attrs) %>>
+  <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/components/hotwirebits/image_zoom_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ImageZoomComponent < Base
+    def initialize(src:, alt: nil, zoom_level: 2, container_size: nil, **attrs)
+      @src = src
+      @alt = alt
+      @zoom_level = zoom_level.to_i
+      @container_size = container_size
+      @extra_attrs = attrs
+    end
+
+    def container_style
+      @container_size ? "width: #{@container_size}px; height: #{@container_size}px;" : nil
+    end
+  end
+end

data/app/components/hotwirebits/incentive_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <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/components/hotwirebits/incentive_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class IncentiveComponent < Base
+    def initialize(icon:, title:, description: nil, **attrs)
+      @icon = icon
+      @title = title
+      @description = description
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("flex flex-col items-center text-center", @extra_attrs.delete(:class))
+    end
+  end
+end

data/app/components/hotwirebits/indicator_badge_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= wrapper_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+  <span class="<%= badge_classes %>">
+    <% unless @dot %>
+      <%= @badge_content %>
+    <% end %>
+  </span>
+</div>

data/app/components/hotwirebits/indicator_badge_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class IndicatorBadgeComponent < Base
+    POSITIONS = {
+      top_left: "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+      top_right: "top-0 right-0 translate-x-1/2 -translate-y-1/2",
+      bottom_left: "bottom-0 left-0 -translate-x-1/2 translate-y-1/2",
+      bottom_right: "bottom-0 right-0 translate-x-1/2 translate-y-1/2"
+    }.freeze
+
+    def initialize(badge_content: nil, position: :top_right, color: nil, dot: false, **attrs)
+      @badge_content = badge_content
+      @position = position
+      @color = color || "bg-hw-primary"
+      @dot = dot
+      @extra_attrs = attrs
+    end
+
+    def wrapper_classes
+      "relative inline-flex"
+    end
+
+    def badge_classes
+      merge_classes(
+        "absolute flex items-center justify-center rounded-full",
+        POSITIONS[@position] || POSITIONS[:top_right],
+        @color,
+        @dot ? "h-2.5 w-2.5" : "h-5 min-w-5 px-1 text-xs font-medium text-hw-primary-foreground"
+      )
+    end
+  end
+end

data/app/components/hotwirebits/indicator_component.html.erb

@@ -0,0 +1,6 @@
+<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(@extra_attrs) %>>
+    <%= @label %>
+  </div>
+</div>

data/app/components/hotwirebits/indicator_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class IndicatorComponent < Base
+    POSITIONS = {
+      top_left: "-top-1 -left-1",
+      top_right: "-top-1 -right-1",
+      bottom_left: "-bottom-1 -left-1",
+      bottom_right: "-bottom-1 -right-1"
+    }.freeze
+
+    def initialize(position: :top_right, color: nil, label: nil, **attrs)
+      @position = position
+      @color = color
+      @label = label
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def indicator_classes
+      color_class = @color || "bg-hw-primary"
+      merge_classes(
+        "absolute flex items-center justify-center",
+        POSITIONS[@position] || POSITIONS[:top_right],
+        color_class
+      )
+    end
+  end
+end

data/app/components/hotwirebits/inline_edit_component.html.erb

@@ -0,0 +1,50 @@
+<div class="group relative inline-flex items-center gap-2"
+     data-controller="hw-inline-edit"
+     <%= tag.attributes(@extra_attrs) %>>
+  <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/components/hotwirebits/inline_edit_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InlineEditComponent < Base
+    TYPES = %i[text textarea select].freeze
+
+    def initialize(name:, value: nil, type: :text, options: [], placeholder: nil, **attrs)
+      @name = name
+      @value = value
+      @type = TYPES.include?(type) ? type : :text
+      @options = options
+      @placeholder = placeholder
+      @extra_attrs = attrs
+    end
+  end
+end

data/app/components/hotwirebits/inplace_component.html.erb

@@ -0,0 +1,6 @@
+<div class="inline-block" data-controller="hw-inplace" <%= tag.attributes(@extra_attrs) %>>
+  <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/components/hotwirebits/inplace_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InplaceComponent < Base
+    def initialize(value: nil, display_class: nil, name: nil, placeholder: "Click to edit", disabled: false, **attrs)
+      @value = value
+      @display_class = display_class
+      @name = name
+      @placeholder = placeholder
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def display_element
+      tag.div(
+        class: merge_classes("cursor-pointer rounded-md px-2 py-1 hover:bg-hw-accent transition-colors min-h-[2rem]",
+          @display_class),
+        data: {action: @disabled ? nil : "click->hw-inplace#edit", rb_inplace_target: "display"}
+      ) do
+        @value.presence || tag.span(@placeholder, class: "text-hw-muted-foreground")
+      end
+    end
+
+    def edit_element
+      tag.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: {
+          rb_inplace_target: "input",
+          action: "blur->hw-inplace#save keydown->hw-inplace#keydown"
+        }
+      )
+    end
+  end
+end

data/app/components/hotwirebits/input_component.html.erb

@@ -0,0 +1,13 @@
+<% 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"><%= safe_svg(@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_classes %>" <%= tag.attributes(@extra_attrs) %>>
+    <% if @icon_position == :right %>
+      <div class="absolute right-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground"><%= safe_svg(@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_classes %>" <%= tag.attributes(@extra_attrs) %>>
+<% end %>

data/app/components/hotwirebits/input_component.rb

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InputComponent < Base
+    SIZES = {
+      sm: "h-8 px-3 text-xs",
+      md: "h-9 px-3 text-sm",
+      lg: "h-10 px-4 text-base"
+    }.freeze
+
+    def initialize(
+      type: "text",
+      name: nil,
+      value: nil,
+      placeholder: nil,
+      size: :md,
+      disabled: false,
+      readonly: false,
+      required: false,
+      error: false,
+      icon: nil,
+      icon_position: :left,
+      autocomplete: nil,
+      min: nil,
+      max: nil,
+      step: nil,
+      pattern: nil,
+      **attrs
+    )
+      @type = type
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @size = size
+      @disabled = disabled
+      @readonly = readonly
+      @required = required
+      @error = error
+      @icon = icon
+      @icon_position = icon_position
+      @autocomplete = autocomplete
+      @min = min
+      @max = max
+      @step = step
+      @pattern = pattern
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_element
+      tag.input(
+        type: @type,
+        name: @name,
+        value: @value,
+        placeholder: @placeholder,
+        disabled: @disabled,
+        readonly: @readonly,
+        required: @required,
+        autocomplete: @autocomplete,
+        min: @min,
+        max: @max,
+        step: @step,
+        pattern: @pattern,
+        class: input_classes,
+        **@extra_attrs
+      )
+    end
+
+    def input_classes
+      error_classes = @error ? "border-hw-destructive focus-visible:ring-hw-destructive" : "border-hw-input focus-visible:ring-hw-ring"
+      icon_padding = if @icon
+        (@icon_position == :left) ? "pl-9" : "pr-9"
+      else
+        ""
+      end
+
+      merge_classes(
+        "flex w-full rounded-md border bg-hw-background text-hw-foreground ring-offset-hw-background",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "placeholder:text-hw-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        error_classes,
+        icon_padding,
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+
+    def icon_element
+      position_class = (@icon_position == :left) ? "left-3" : "right-3"
+      tag.div(class: merge_classes("absolute top-1/2 -translate-y-1/2 text-hw-muted-foreground", position_class)) do
+        safe_svg(@icon)
+      end
+    end
+  end
+end

data/app/components/hotwirebits/input_group_component.html.erb

@@ -0,0 +1,9 @@
+<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(@extra_attrs) %>>
+  <% 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/components/hotwirebits/input_group_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class InputGroupComponent < Base
+    def initialize(addon_before: nil, addon_after: nil, disabled: false, **attrs)
+      @addon_before = addon_before
+      @addon_after = addon_after
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def group_classes
+      merge_classes(
+        "flex [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none",
+        "[&>*:not(:first-child)]:-ml-px"
+      )
+    end
+
+    def addon_element(position)
+      tag.span(class: addon_classes(position)) do
+        if @addon_before.is_a?(String) && position == :before
+          @addon_before
+        else
+          ((@addon_after.is_a?(String) && position == :after) ? @addon_after : nil)
+        end
+      end
+    end
+
+    def addon_classes(_position)
+      merge_classes(
+        "inline-flex items-center rounded-md border border-hw-input bg-hw-muted px-3 text-sm text-hw-muted-foreground",
+        "whitespace-nowrap"
+      )
+    end
+  end
+end