hotwirebits 0.1.0

data/app/components/hotwirebits/calendar_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CalendarComponent < Base
+    def initialize(month: nil, year: nil, events: [], selected_date: nil, **attrs)
+      @month = month || Date.today.month
+      @year = year || Date.today.year
+      @events = events
+      @selected_date = selected_date
+      @extra_attrs = attrs
+    end
+
+    def date
+      Date.new(@year, @month, 1)
+    end
+
+    def days_in_month
+      date.end_of_month.day
+    end
+
+    def start_wday
+      date.wday
+    end
+
+    def month_name
+      date.strftime("%B")
+    end
+
+    def events_for(day)
+      d = Date.new(@year, @month, day)
+      @events.select { |e| e[:date].to_s == d.to_s }
+    end
+
+    def selected?(day)
+      @selected_date && Date.new(@year, @month, day) == @selected_date
+    end
+
+    def today?(day)
+      Date.new(@year, @month, day) == Date.today
+    end
+
+    def container_classes
+      merge_classes(
+        "rounded-lg border border-hw-border bg-hw-card p-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<div class="<%= card_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if header? || @title %>
+    <div class="flex flex-col space-y-1.5 p-6">
+      <% if header? %>
+        <%= header %>
+      <% else %>
+        <% if @title %>
+          <h3 class="text-lg font-semibold leading-none tracking-tight"><%= @title %></h3>
+        <% end %>
+        <% if @description %>
+          <p class="text-sm text-hw-muted-foreground"><%= @description %></p>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+  <div class="p-6 pt-0">
+    <%= content %>
+  </div>
+  <% if footer? %>
+    <div class="flex items-center p-6 pt-0">
+      <%= footer %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/card_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CardComponent < Base
+    renders_one :header
+    renders_one :footer
+
+    def initialize(title: nil, description: nil, **attrs)
+      @title = title
+      @description = description
+      @extra_attrs = attrs
+    end
+
+    def card_classes
+      merge_classes(
+        "rounded-lg border border-hw-border bg-hw-card text-hw-card-foreground shadow-sm",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div class="flex items-start justify-between gap-4" <%= tag.attributes(@extra_attrs) %>>
+  <div>
+    <h3 class="text-base font-semibold text-hw-foreground"><%= @title %></h3>
+    <% if @subtitle %>
+      <p class="mt-0.5 text-sm text-hw-muted-foreground"><%= @subtitle %></p>
+    <% end %>
+  </div>
+  <% if @action_label && @action_href %>
+    <a href="<%= @action_href %>" class="text-sm font-medium text-hw-primary hover:text-hw-primary/80 transition-colors shrink-0">
+      <%= @action_label %>
+    </a>
+  <% end %>
+</div>

data/app/components/hotwirebits/card_heading_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CardHeadingComponent < Base
+    def initialize(title:, subtitle: nil, action_label: nil, action_href: nil, **attrs)
+      @title = title
+      @subtitle = subtitle
+      @action_label = action_label
+      @action_href = action_href
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+<div class="<%= container_classes %>"
+     data-controller="hw-carousel"
+     data-hw-carousel-autoplay-value="<%= @autoplay %>"
+     data-hw-carousel-interval-value="<%= @interval %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex transition-transform duration-300 ease-in-out"
+       data-hw-carousel-target="track">
+    <% all_slides.each do |slide| %>
+      <div class="w-full shrink-0" data-hw-carousel-target="slide">
+        <% if slides? %>
+          <%= slide %>
+        <% else %>
+          <% if slide.is_a?(Hash) && slide[:image] %>
+            <img src="<%= slide[:image] %>" alt="<%= slide[:alt] || '' %>" class="w-full h-full object-cover">
+          <% else %>
+            <%= slide.is_a?(Hash) ? slide[:content] : slide %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <% if @show_arrows %>
+    <button type="button"
+            class="absolute left-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-hw-background/80 border border-hw-border flex items-center justify-center shadow-sm hover:bg-hw-background transition-colors"
+            data-action="click->hw-carousel#prev">
+      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
+      <span class="sr-only">Previous</span>
+    </button>
+    <button type="button"
+            class="absolute right-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full bg-hw-background/80 border border-hw-border flex items-center justify-center shadow-sm hover:bg-hw-background transition-colors"
+            data-action="click->hw-carousel#next">
+      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
+      <span class="sr-only">Next</span>
+    </button>
+  <% end %>
+  <% if @show_dots %>
+    <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-1.5" data-hw-carousel-target="dots">
+      <% all_slides.each_with_index do |_, i| %>
+        <button type="button"
+                class="h-2 w-2 rounded-full bg-hw-background/60 data-[active]:bg-hw-primary transition-colors"
+                data-action="click->hw-carousel#goTo"
+          data-index="<%= i %>"
+          data-hw-carousel-target="dot"
+          <%= 'data-active' if i == 0 %>>
+          <span class="sr-only">Slide <%= i + 1 %></span>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/carousel_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CarouselComponent < Base
+    renders_many :slides
+
+    def initialize(items: [], autoplay: false, show_dots: true, show_arrows: true, interval: 5000, **attrs)
+      @items = items
+      @autoplay = autoplay
+      @show_dots = show_dots
+      @show_arrows = show_arrows
+      @interval = interval
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "relative w-full overflow-hidden",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def all_slides
+      slides? ? slides : @items
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= center_classes %>" <% if center_styles %>style="<%= center_styles %>"<% end %> <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</div>

data/app/components/hotwirebits/center_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CenterComponent < Base
+    def initialize(inline: false, height: nil, **attrs)
+      @inline = inline
+      @height = height
+      @extra_attrs = attrs
+    end
+
+    def center_classes
+      merge_classes(
+        @inline ? "inline-flex justify-center items-center" : "flex justify-center items-center",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def center_styles
+      @height ? "height: #{@height};" : nil
+    end
+  end
+end

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

@@ -0,0 +1,68 @@
+<div class="<%= container_classes %>" style="height: <%= @height %>px" <%= tag.attributes(@extra_attrs) %>>
+  <svg viewBox="0 0 100 60" preserveAspectRatio="none" class="w-full h-full">
+    <% case @type %>
+    <% when :line %>
+      <% @data.each_with_index do |d, i| %>
+        <% x = (i * (100.0 / ([@data.size - 1, 1].max))).round(2) %>
+        <% y = max_value.zero? ? 50 : (50 - (d[:value].to_f / max_value * 48)).round(2) %>
+        <circle cx="<%= x %>" cy="<%= y %>" r="1" fill="var(--hw-primary, #3b82f6)"/>
+      <% end %>
+      <polyline fill="none" stroke="var(--hw-primary, #3b82f6)" stroke-width="0.5" points="<%= line_points %>"/>
+
+    <% when :area %>
+      <polygon fill="var(--hw-primary, #3b82f6)" opacity="0.15" points="<%= area_points %>"/>
+      <polyline fill="none" stroke="var(--hw-primary, #3b82f6)" stroke-width="0.5" points="<%= line_points %>"/>
+      <% @data.each_with_index do |d, i| %>
+        <% x = (i * (100.0 / ([@data.size - 1, 1].max))).round(2) %>
+        <% y = max_value.zero? ? 50 : (50 - (d[:value].to_f / max_value * 48)).round(2) %>
+        <circle cx="<%= x %>" cy="<%= y %>" r="1" fill="var(--hw-primary, #3b82f6)"/>
+      <% end %>
+
+    <% when :bar %>
+      <% @data.each_with_index do |d, i| %>
+        <% bw = bar_width %>
+        <% x = (i * (100.0 / @data.size) + bar_gap).round(2) %>
+        <% h = max_value.zero? ? 0 : (d[:value].to_f / max_value * 48).round(2) %>
+        <% y = (50 - h).round(2) %>
+        <rect x="<%= x %>" y="<%= y %>" width="<%= bw %>" height="<%= h %>" rx="1"
+              fill="<%= d[:color] || 'var(--hw-primary, #3b82f6)' %>" opacity="0.85"/>
+        <% if @show_values %>
+          <text x="<%= (x + bw / 2).round(2) %>" y="<%= (y - 1.5).round(2) %>"
+                text-anchor="middle" font-size="2.5" fill="var(--hw-foreground, #111)">
+          <%= d[:value] %>
+        </text>
+      <% end %>
+    <% end %>
+  <% when :pie, :donut %>
+    <% cx, cy, r = 50, 30, @type == :donut ? 18 : 24 %>
+    <% inner = @type == :donut ? 10 : 0 %>
+    <% total = sum_values %>
+    <% angle = -90 %>
+    <% colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#f97316'] %>
+    <% @data.each_with_index do |d, i| %>
+      <% pct = total.zero? ? 0 : (d[:value].to_f / total * 360) %>
+      <% start_angle = angle %>
+      <% end_angle = angle + pct %>
+      <% angle = end_angle %>
+      <% start_rad = start_angle * Math::PI / 180 %>
+      <% end_rad = end_angle * Math::PI / 180 %>
+      <% x1 = (cx + r * Math.cos(start_rad)).round(2) %>
+      <% y1 = (cy + r * Math.sin(start_rad)).round(2) %>
+      <% x2 = (cx + r * Math.cos(end_rad)).round(2) %>
+      <% y2 = (cy + r * Math.sin(end_rad)).round(2) %>
+      <% large = pct > 180 ? 1 : 0 %>
+      <% if @type == :donut %>
+        <% ix1 = (cx + inner * Math.cos(start_rad)).round(2) %>
+        <% iy1 = (cy + inner * Math.sin(start_rad)).round(2) %>
+        <% ix2 = (cx + inner * Math.cos(end_rad)).round(2) %>
+        <% iy2 = (cy + inner * Math.sin(end_rad)).round(2) %>
+        <path d="M<%= x1 %>,<%= y1 %> A<%= r %>,<%= r %> 0 <%= large %> 1 <%= x2 %>,<%= y2 %> L<%= ix2 %>,<%= iy2 %> A<%= inner %>,<%= inner %> 0 <%= large %> 0 <%= ix1 %>,<%= iy1 %> Z"
+                fill="<%= d[:color] || colors[i % colors.size] %>"/>
+        <% else %>
+          <path d="M<%= cx %>,<%= cy %> L<%= x1 %>,<%= y1 %> A<%= r %>,<%= r %> 0 <%= large %> 1 <%= x2 %>,<%= y2 %> Z"
+                fill="<%= d[:color] || colors[i % colors.size] %>"/>
+        <% end %>
+      <% end %>
+    <% end %>
+  </svg>
+        </div>

data/app/components/hotwirebits/chart_component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ChartComponent < Base
+    TYPES = %i[line bar pie donut area].freeze
+
+    def initialize(type: :line, data: [], height: 300, width: nil, show_values: false, **attrs)
+      @type = type
+      @data = data
+      @height = height
+      @width = width
+      @show_values = show_values
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def svg_width
+      @width || "100%"
+    end
+
+    def max_value
+      @data.map { |d| d[:value] || d[:values]&.max || 0 }.max.to_f
+    end
+
+    def sum_values
+      @data.sum { |d| d[:value] || 0 }.to_f
+    end
+
+    def line_points
+      return "" if @data.empty?
+
+      max = max_value
+      w = 100.0 / (@data.size - 1)
+      @data.each_with_index.map do |d, i|
+        x = (i * w).round(2)
+        y = max.zero? ? 50 : (50 - (d[:value].to_f / max * 48)).round(2)
+        "#{x},#{y}"
+      end.join(" ")
+    end
+
+    def area_points
+      points = line_points
+      return "" if points.empty?
+
+      w = 100.0 / (@data.size - 1)
+      "#{points} #{((@data.size - 1) * w).round(2)},50 0,50"
+    end
+
+    def bar_width
+      return 0 if @data.empty?
+
+      (100.0 / @data.size * 0.7).round(2)
+    end
+
+    def bar_gap
+      return 0 if @data.empty?
+
+      (100.0 / @data.size * 0.15).round(2)
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="<%= wrapper_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @avatar %>
+    <div class="shrink-0 mt-1">
+      <img src="<%= @avatar %>" alt="<%= @sender || '' %>" class="h-8 w-8 rounded-full object-cover">
+    </div>
+  <% end %>
+  <div class="flex flex-col gap-1">
+    <% if @sender %>
+      <span class="text-xs font-medium text-hw-muted-foreground px-1 <%= 'text-right' if sent? %>"><%= @sender %></span>
+    <% end %>
+    <div class="<%= bubble_classes %>">
+      <%= @message %>
+    </div>
+    <div class="flex items-center gap-2 px-1 <%= 'justify-end' if sent? %>">
+      <% if @time %>
+        <span class="text-xs text-hw-muted-foreground"><%= @time %></span>
+      <% end %>
+      <% if actions? %>
+        <div class="flex items-center gap-1">
+          <% actions.each do |action| %>
+            <%= action %>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/chat_bubble_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ChatBubbleComponent < Base
+    renders_many :actions
+
+    def initialize(message:, sender: nil, avatar: nil, time: nil, direction: :received, **attrs)
+      @message = message
+      @sender = sender
+      @avatar = avatar
+      @time = time
+      @direction = direction
+      @extra_attrs = attrs
+    end
+
+    def sent?
+      @direction == :sent
+    end
+
+    def bubble_classes
+      merge_classes(
+        "max-w-[80%] rounded-2xl px-4 py-2.5 text-sm",
+        sent? ? "bg-hw-primary text-hw-primary-foreground rounded-br-sm" : "bg-hw-muted text-hw-foreground rounded-bl-sm",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def wrapper_classes
+      merge_classes(
+        "flex gap-2",
+        sent? ? "flex-row-reverse" : "flex-row"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<label class="flex items-center gap-2 cursor-pointer" <%= tag.attributes(@extra_attrs) %>>
+  <input type="checkbox" name="<%= @name %>" value="<%= @value %>" <%= 'checked' if @checked || @indeterminate %> <%= 'disabled' if @disabled %> class="peer shrink-0 rounded-sm border border-hw-input bg-hw-background 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 checked:bg-hw-primary checked:border-hw-primary <%= SIZES[@size] || 'h-4 w-4' %>">
+  <span class="pointer-events-none absolute inset-0 flex items-center justify-center">
+    <svg class="text-hw-primary-foreground <%= SIZES[@size] || 'h-4 w-4' %>" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
+  </span>
+  <% if @label %>
+    <span class="font-medium leading-none text-sm peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><%= @label %></span>
+  <% end %>
+</label>

data/app/components/hotwirebits/checkbox_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CheckboxComponent < Base
+    SIZES = {
+      sm: "h-3.5 w-3.5",
+      md: "h-4 w-4",
+      lg: "h-5 w-5"
+    }.freeze
+
+    def initialize(name: nil, value: nil, checked: false, indeterminate: false, disabled: false, label: nil, size: :md,
+      error: false, **attrs)
+      @name = name
+      @value = value
+      @checked = checked
+      @indeterminate = indeterminate
+      @disabled = disabled
+      @label = label
+      @size = size
+      @error = error
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_element
+      attrs = {
+        type: "checkbox",
+        name: @name,
+        value: @value,
+        checked: @checked || @indeterminate,
+        disabled: @disabled,
+        class: input_classes,
+        data: {action: "change->hw-checkbox#toggle"}
+      }
+      tag.input(**attrs.merge(@extra_attrs))
+    end
+
+    def check_icon
+      tag.span(class: "pointer-events-none absolute inset-0 flex items-center justify-center") do
+        tag.svg(class: merge_classes("text-hw-primary-foreground", SIZES[@size] || SIZES[:md]),
+          fill: "none", stroke: "currentColor", stroke_width: "3", viewBox: "0 0 24 24") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M5 13l4 4L19 7")
+        end
+      end
+    end
+
+    def input_classes
+      error_classes = @error ? "border-hw-destructive" : "border-hw-input"
+      merge_classes(
+        "peer shrink-0 rounded-sm border bg-hw-background 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",
+        "checked:bg-hw-primary checked:border-hw-primary",
+        error_classes,
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+
+    def label_classes
+      "flex items-center gap-2 cursor-pointer"
+    end
+
+    def label_text_classes
+      text_sizes = {sm: "text-xs", md: "text-sm", lg: "text-base"}
+      merge_classes("font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        text_sizes[@size] || text_sizes[:md])
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+<div class="mx-auto max-w-3xl" <%= tag.attributes(@extra_attrs) %>>
+  <nav aria-label="Progress" class="mb-10">
+    <ol class="flex items-center">
+      <% @steps.each_with_index do |step, index| %>
+        <li class="<%= 'flex-1' unless index == @steps.size - 1 %> flex items-center">
+          <div class="flex items-center gap-2">
+            <% case step_status(index)
+               when :complete %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full bg-hw-primary text-hw-primary-foreground">
+                <svg class="h-4 w-4" 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>
+              </div>
+              <span class="text-sm font-medium text-hw-foreground"><%= step[:label] %></span>
+            <% when :current %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-hw-primary text-sm font-semibold text-hw-primary">
+                <%= index + 1 %>
+              </div>
+              <span class="text-sm font-semibold text-hw-primary"><%= step[:label] %></span>
+            <% when :upcoming %>
+              <div class="flex h-8 w-8 items-center justify-center rounded-full border-2 border-hw-border text-sm text-hw-muted-foreground">
+                <%= index + 1 %>
+              </div>
+              <span class="text-sm text-hw-muted-foreground"><%= step[:label] %></span>
+            <% end %>
+          </div>
+          <% unless index == @steps.size - 1 %>
+            <div class="mx-4 h-px flex-1 <%= step_status(index) == :complete ? 'bg-hw-primary' : 'bg-hw-border' %>"></div>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+  <div class="rounded-xl border border-hw-border bg-white p-6 shadow-sm">
+    <h2 class="mb-6 text-lg font-semibold text-hw-foreground"><%= @steps[@current_step]&.dig(:label) %></h2>
+    <div class="text-sm text-hw-muted-foreground">
+      <%= content %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/checkout_form_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CheckoutFormComponent < Base
+    def initialize(steps: [], current_step: 0, **attrs)
+      @steps = steps
+      @current_step = current_step.to_i
+      @extra_attrs = attrs
+    end
+
+    def step_status(index)
+      if index < @current_step
+        :complete
+      elsif index == @current_step
+        :current
+      else
+        :upcoming
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div class="<%= chip_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @avatar %>
+    <img src="<%= @avatar %>" class="h-5 w-5 rounded-full" alt="">
+  <% end %>
+  <%= content || @label %>
+  <% if @removable %>
+    <button type="button" class="ml-0.5 -mr-1 h-4 w-4 rounded-full hover:bg-hw-muted p-0.5 focus:outline-none">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-3 w-3">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

data/app/components/hotwirebits/chip_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ChipComponent < Base
+    def initialize(label: nil, removable: false, avatar: nil, icon: nil, size: :md, **attrs)
+      @label = label
+      @removable = removable
+      @avatar = avatar
+      @icon = icon
+      @size = size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def chip_classes
+      sizes = {
+        sm: "h-6 text-xs px-2 gap-1",
+        md: "h-8 text-sm px-2.5 gap-1.5",
+        lg: "h-10 text-sm px-3 gap-2"
+      }
+      merge_classes(
+        "inline-flex items-center rounded-full border border-hw-border bg-hw-background",
+        "text-hw-foreground font-medium",
+        sizes[@size] || sizes[:md]
+      )
+    end
+
+    def avatar_element
+      return unless @avatar
+
+      tag.img(src: @avatar, class: "h-5 w-5 rounded-full", alt: "")
+    end
+
+    def icon_element
+      return unless @icon
+
+      tag.span(safe_svg(@icon), class: "h-4 w-4") if @icon.is_a?(String)
+    end
+
+    def dismiss_button
+      tag.button(type: "button",
+        class: "ml-0.5 -mr-1 h-4 w-4 rounded-full hover:bg-hw-muted p-0.5 focus:outline-none") do
+        tag.svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none",
+          stroke: "currentColor", stroke_width: "2", class: "h-3 w-3") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M6 18L18 6M6 6l12 12")
+        end
+      end
+    end
+  end
+end