hotwirebits 0.1.0

data/app/components/hotwirebits/panel_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PanelComponent < Base
+    renders_one :actions
+
+    def initialize(title: nil, collapsed: false, **attrs)
+      @title = title
+      @collapsed = collapsed
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def header_element
+      tag.div(class: "flex items-center justify-between px-4 py-3") do
+        safe_join([
+          tag.button(
+            type: "button",
+            class: "flex items-center gap-2 text-sm font-medium text-hw-foreground hover:text-hw-foreground/80",
+            data: {action: "click->hw-panel#toggle"}
+          ) do
+            safe_join([
+              tag.svg(
+                class: merge_classes("h-4 w-4 shrink-0 transition-transform duration-200", @collapsed ? "" : "rotate-90"),
+                data: {rb_panel_target: "chevron"},
+                fill: "none", stroke: "currentColor", stroke_width: "2", viewBox: "0 0 24 24"
+              ) do
+                tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M9 5l7 7-7 7")
+              end,
+              tag.span(@title)
+            ])
+          end,
+          (tag.div(class: "flex items-center gap-1") { actions } if actions?)
+        ])
+      end
+    end
+
+    def content_element
+      tag.div(
+        class: merge_classes("px-4 pb-4", @collapsed ? "hidden" : ""),
+        data: {rb_panel_target: "content"}
+      ) do
+        content
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<div class="relative" data-controller="hw-password">
+  <input type="password" name="<%= @name %>" value="<%= @value %>" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled %> <%= 'required' if @required %> class="<%= input_classes %>" data-hw-password-target="input" <%= tag.attributes(@extra_attrs) %>>
+  <% if @show_toggle %>
+    <button type="button" class="absolute right-0 top-0 flex h-full items-center px-3 text-hw-muted-foreground hover:text-hw-foreground" data-action="click->hw-password#toggle">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+    </button>
+  <% end %>
+</div>

data/app/components/hotwirebits/password_input_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PasswordInputComponent < Base
+    def initialize(name: "password", value: nil, placeholder: "Enter password", size: :md, show_toggle: true,
+      show_strength: false, disabled: false, required: false, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @size = size
+      @show_toggle = show_toggle
+      @show_strength = show_strength
+      @disabled = disabled
+      @required = required
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def size_classes
+      {sm: "h-8 px-3 text-xs pr-9", md: "h-9 px-3 text-sm pr-10",
+       lg: "h-10 px-4 text-base pr-12"}[@size] || "h-9 px-3 text-sm pr-10"
+    end
+
+    def input_element
+      tag.input(
+        type: "password",
+        name: @name,
+        value: @value,
+        placeholder: @placeholder,
+        disabled: @disabled,
+        required: @required,
+        class: merge_classes(
+          "flex w-full rounded-md border border-hw-input bg-hw-background 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",
+          size_classes
+        ),
+        data: {rb_password_target: "input"},
+        **@extra_attrs
+      )
+    end
+
+    def toggle_button
+      tag.button(
+        type: "button",
+        class: "absolute right-0 top-0 flex h-full items-center px-3 text-hw-muted-foreground hover:text-hw-foreground",
+        data: {action: "click->hw-password#toggle"}
+      ) do
+        tag.span(data: {rb_password_target: "icon"}) do
+          tag.svg(class: "h-4 w-4", fill: "none", stroke: "currentColor", stroke_width: "2", viewBox: "0 0 24 24") do
+            tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z") +
+              tag.path(stroke_linecap: "round", stroke_linejoin: "round",
+                d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z")
+          end
+        end
+      end
+    end
+
+    def strength_meter
+      tag.div(class: "mt-2", data: {rb_password_target: "meter"}) do
+        tag.div(class: "flex gap-1 mb-1") do
+          4.times.map do |_i|
+            tag.div(class: "h-1 w-full rounded-full bg-hw-muted", data: {rb_password_target: "bar"})
+          end.join.html_safe
+        end +
+          tag.p(class: "text-xs text-hw-muted-foreground", data: {rb_password_target: "label"},
+            text: "Password strength")
+      end
+    end
+  end
+end

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

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

data/app/components/hotwirebits/password_strength_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PasswordStrengthComponent < Base
+    LABELS = %w[Weak Fair Good Strong].freeze
+    COLORS = %w[bg-hw-destructive bg-hw-warning bg-hw-warning bg-hw-success].freeze
+
+    def initialize(password: "", **attrs)
+      @password = password.to_s
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def strength_level
+      score = 0
+      score += 1 if @password.length >= 8
+      score += 1 if @password =~ /[a-z]/ && @password =~ /[A-Z]/
+      score += 1 if /\d/.match?(@password)
+      score += 1 if /[^a-zA-Z0-9]/.match?(@password)
+      [score - 1, 0].max
+    end
+  end
+end

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

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

data/app/components/hotwirebits/password_toggle_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PasswordToggleComponent < Base
+    def initialize(target_input: nil, **attrs)
+      @target_input = target_input
+      @extra_attrs = attrs
+    end
+  end
+end

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

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

data/app/components/hotwirebits/permission_badge_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PermissionBadgeComponent < Base
+    ROLES = {
+      admin: {bg: "bg-hw-destructive/10 text-hw-destructive border-red-200", label: "Admin"},
+      editor: {bg: "bg-hw-info/10 text-hw-info border-blue-200", label: "Editor"},
+      viewer: {bg: "bg-hw-muted text-hw-foreground border-gray-200", label: "Viewer"},
+      owner: {bg: "bg-hw-primary/10 text-hw-primary border-purple-200", label: "Owner"}
+    }.freeze
+
+    def initialize(role: :viewer, label: nil, **attrs)
+      @role = role
+      @label = label
+      @extra_attrs = attrs
+    end
+
+    def role_config
+      ROLES[@role] || ROLES[:viewer]
+    end
+
+    def display_label
+      @label || role_config[:label]
+    end
+
+    def badge_classes
+      merge_classes(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold",
+        role_config[:bg]
+      )
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<input type="tel" name="<%= @name %>" value="<%= @value %>" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled %> class="<%= input_classes %>" <%= tag.attributes(@extra_attrs) %>>

data/app/components/hotwirebits/phone_input_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PhoneInputComponent < Base
+    def initialize(name: "phone", value: nil, placeholder: "+1 (555) 000-0000", size: :md, country_code: nil,
+      disabled: false, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @size = size
+      @country_code = country_code
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_classes
+      sizes = {sm: "h-8 px-3 text-xs", md: "h-9 px-3 text-sm", lg: "h-10 px-4 text-base"}
+      merge_classes(
+        "flex w-full rounded-md border border-hw-input bg-hw-background 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",
+        sizes[@size] || sizes[:md]
+      )
+    end
+  end
+end

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

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

data/app/components/hotwirebits/phone_mockup_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PhoneMockupComponent < Base
+    DEVICES = %i[iphone android].freeze
+
+    def initialize(device: :iphone, color: :black, **attrs)
+      @device = DEVICES.include?(device) ? device : :iphone
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    def frame_classes
+      case @device
+      when :android
+        "rounded-[2rem] border-[6px] overflow-hidden shadow-xl"
+      else
+        "rounded-[3rem] border-[10px] overflow-hidden shadow-xl"
+      end
+    end
+
+    def border_color
+      case @color
+      when :silver then "border-hw-border bg-hw-muted"
+      when :gold then "border-hw-warning/30 bg-amber-200"
+      else "border-hw-foreground bg-hw-foreground"
+      end
+    end
+  end
+end

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

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

data/app/components/hotwirebits/popover_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PopoverComponent < Base
+    renders_one :trigger
+
+    def initialize(align: :center, side: :bottom, open: false, trigger_label: "Open", **attrs)
+      @align = align
+      @side = side
+      @open = open
+      @trigger_label = trigger_label
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def popover_classes
+      merge_classes(
+        "absolute z-50 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",
+        side_classes,
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def side_classes
+      case @side
+      when :top then "bottom-full mb-2 data-[side=top]:slide-in-from-bottom-2"
+      when :bottom then "top-full mt-2 data-[side=bottom]:slide-in-from-top-2"
+      when :left then "right-full mr-2 data-[side=left]:slide-in-from-right-2"
+      when :right then "left-full ml-2 data-[side=right]:slide-in-from-left-2"
+      end
+    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/portal_component.html.erb

@@ -0,0 +1,3 @@
+<template data-controller="hw-portal" data-hw-portal-target-value="<%= @target %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</template>

data/app/components/hotwirebits/portal_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PortalComponent < Base
+    def initialize(target: "body", **attrs)
+      @target = target
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if @title || @subtitle %>
+      <div class="text-center mb-12">
+        <% if @title %>
+          <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground"><%= @title %></h2>
+        <% end %>
+        <% if @subtitle %>
+          <p class="mt-3 text-lg text-hw-muted-foreground"><%= @subtitle %></p>
+        <% end %>
+      </div>
+    <% end %>
+    <div class="grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-<%= [@plans.size, 4].min %>">
+      <% @plans.each do |plan| %>
+        <div class="flex flex-col rounded-xl border <%= plan[:highlighted] ? 'border-hw-primary shadow-lg ring-1 ring-hw-primary' : 'border-hw-border' %> bg-hw-card p-6">
+          <% if plan[:highlighted] %>
+            <span class="self-start rounded-full bg-hw-primary text-hw-primary-foreground px-3 py-1 text-xs font-medium mb-2">Popular</span>
+          <% end %>
+          <h3 class="text-lg font-semibold text-hw-foreground"><%= plan[:name] %></h3>
+          <div class="mt-3 flex items-baseline gap-1">
+            <span class="text-4xl font-bold text-hw-foreground"><%= plan[:price] %></span>
+            <% if plan[:period] %>
+              <span class="text-sm text-hw-muted-foreground">/<%= plan[:period] %></span>
+            <% end %>
+          </div>
+          <% if plan[:features] %>
+            <ul class="mt-6 space-y-3 flex-1">
+              <% plan[:features].each do |feature| %>
+                <li class="flex items-start gap-2 text-sm text-hw-foreground">
+                  <svg class="h-4 w-4 text-hw-success shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                  <%= feature %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+          <a href="<%= plan[:cta_href] || '#' %>"
+             class="mt-6 inline-flex items-center justify-center rounded-lg h-10 px-4 text-sm font-medium transition-colors <%= plan[:highlighted] ? 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' : 'border border-hw-border text-hw-foreground hover:bg-hw-muted' %>">
+            <%= plan[:cta_label] || 'Get Started' %>
+          </a>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/hotwirebits/pricing_section_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PricingSectionComponent < Base
+    def initialize(plans: [], title: nil, subtitle: nil, **attrs)
+      @plans = plans
+      @title = title
+      @subtitle = subtitle
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<div class="<%= grid_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @products.each do |product| %>
+    <a href="<%= product[:href] || '#' %>" class="group rounded-xl border border-hw-border bg-white overflow-hidden transition-shadow hover:shadow-lg">
+      <div class="aspect-square overflow-hidden bg-hw-muted">
+        <% if product[:image] %>
+          <img src="<%= product[:image] %>" alt="<%= product[:name] %>" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
+        <% end %>
+      </div>
+      <div class="p-4">
+        <h3 class="truncate text-sm font-medium text-hw-foreground"><%= product[:name] %></h3>
+        <p class="mt-1 text-sm font-semibold text-hw-primary"><%= product[:price] %></p>
+        <% if product[:rating] %>
+          <div class="mt-1.5 flex items-center gap-0.5">
+            <% 5.times do |i| %>
+              <svg class="h-3.5 w-3.5 <%= i < product[:rating].to_i ? 'text-hw-warning' : 'text-hw-muted-foreground/40' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/>
+              </svg>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </a>
+  <% end %>
+</div>

data/app/components/hotwirebits/product_list_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ProductListComponent < Base
+    def initialize(products: [], columns: 4, **attrs)
+      @products = products
+      @columns = columns
+      @extra_attrs = attrs
+    end
+
+    def grid_classes
+      cols = case @columns
+      when 2 then "grid-cols-2"
+      when 3 then "grid-cols-2 md:grid-cols-3"
+      when 5 then "grid-cols-2 md:grid-cols-3 lg:grid-cols-5"
+      else "grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+      end
+      merge_classes("grid gap-6", cols, @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,59 @@
+<div class="mx-auto max-w-7xl px-6 py-10 lg:px-8" <%= tag.attributes(@extra_attrs) %>>
+  <div class="grid gap-10 lg:grid-cols-2">
+    <div class="space-y-4">
+      <% if main_image %>
+        <div class="overflow-hidden rounded-xl bg-hw-muted">
+          <img src="<%= main_image[:src] %>" alt="<%= main_image[:alt] || @name %>" class="w-full object-cover">
+        </div>
+      <% end %>
+      <% if @images.size > 1 %>
+        <div class="flex gap-3">
+          <% @images.each do |img| %>
+            <button type="button" class="h-16 w-16 overflow-hidden rounded-lg border-2 border-transparent hover:border-hw-primary">
+              <img src="<%= img[:src] %>" alt="<%= img[:alt] || @name %>" class="h-full w-full object-cover">
+            </button>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <div>
+      <h1 class="text-2xl font-bold text-hw-foreground"><%= @name %></h1>
+      <p class="mt-2 text-2xl font-semibold text-hw-primary"><%= @price %></p>
+      <% if @rating %>
+        <div class="mt-3 flex items-center gap-1">
+          <% 5.times do |i| %>
+            <svg class="h-5 w-5 <%= i < @rating.to_i ? 'text-hw-warning' : 'text-hw-muted-foreground/40' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z" clip-rule="evenodd"/>
+            </svg>
+          <% end %>
+          <span class="ml-1 text-sm text-hw-muted-foreground">(<%= @rating %>)</span>
+        </div>
+      <% end %>
+      <% if @description %>
+        <div class="mt-6 text-sm leading-relaxed text-hw-muted-foreground"><%= @description %></div>
+      <% end %>
+      <% if @features.any? %>
+        <ul class="mt-6 space-y-2">
+          <% @features.each do |feature| %>
+            <li class="flex items-center gap-2 text-sm text-hw-foreground">
+              <svg class="h-4 w-4 text-green-500 shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"/>
+              </svg>
+              <%= feature %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+      <div class="mt-8 flex gap-3">
+        <button type="button" class="flex-1 rounded-lg bg-hw-primary px-6 py-3 text-sm font-semibold text-hw-primary-foreground transition-colors hover:bg-hw-primary/90">
+          Add to Cart
+        </button>
+        <button type="button" class="rounded-lg border border-hw-border px-4 py-3 text-sm font-medium text-hw-foreground hover:bg-hw-muted">
+          <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="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/product_overview_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ProductOverviewComponent < Base
+    def initialize(name:, price:, images: [], description: nil, features: [], rating: nil, **attrs)
+      @name = name
+      @price = price
+      @images = images
+      @description = description
+      @features = features
+      @rating = rating
+      @extra_attrs = attrs
+    end
+
+    def main_image
+      @images.first
+    end
+  end
+end