hotwirebits 0.1.0

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

@@ -0,0 +1,45 @@
+<div class="rounded-xl border border-hw-border bg-hw-card overflow-hidden shadow-lg max-w-sm"
+     data-controller="hw-quickview"
+     <%= tag.attributes(@extra_attrs) %>>
+  <% if @image %>
+    <div class="relative aspect-square bg-hw-muted">
+      <img src="<%= @image %>" alt="<%= @name %>" class="h-full w-full object-cover">
+      <button type="button"
+              class="absolute top-3 right-3 h-8 w-8 inline-flex items-center justify-center rounded-full bg-hw-background/80 backdrop-blur text-hw-muted-foreground hover:bg-hw-background hover:text-hw-foreground transition-colors cursor-pointer"
+              data-action="click->hw-quickview#close"
+        aria-label="Close">
+        <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>
+  <% end %>
+  <div class="p-4 space-y-3">
+    <div class="flex items-start justify-between gap-2">
+      <h3 class="text-base font-semibold text-hw-foreground"><%= @name %></h3>
+      <span class="text-lg font-bold text-hw-primary"><%= @price %></span>
+    </div>
+    <% if @rating %>
+      <div class="flex items-center gap-1">
+        <% 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" fill="<%= i < @rating ? 'currentColor' : 'none' %>" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+          </svg>
+        <% end %>
+      </div>
+    <% end %>
+    <% if @description %>
+      <p class="text-sm text-hw-muted-foreground line-clamp-2"><%= @description %></p>
+    <% end %>
+    <div class="flex gap-2 pt-2">
+      <button type="button"
+              class="flex-1 inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors cursor-pointer">
+        Add to Cart
+      </button>
+      <% if @href %>
+        <a href="<%= @href %>"
+           class="inline-flex h-9 items-center justify-center rounded-md border border-hw-input bg-hw-background px-4 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors">
+          Details
+        </a>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/product_quickview_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ProductQuickviewComponent < Base
+    def initialize(name:, price:, image: nil, description: nil, rating: nil, href: nil, **attrs)
+      @name = name
+      @price = price
+      @image = image
+      @description = description
+      @rating = rating
+      @href = href
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<div <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between mb-1">
+    <% if @show_label %>
+      <span class="text-sm font-medium"><%= percentage %>%</span>
+    <% end %>
+  </div>
+  <div class="<%= track_classes %>">
+    <div class="<%= bar_classes %>" style="width: <%= percentage %>%;"></div>
+  </div>
+</div>

data/app/components/hotwirebits/progress_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ProgressComponent < Base
+    SIZES = {
+      sm: "h-1.5",
+      md: "h-2.5",
+      lg: "h-4"
+    }.freeze
+
+    COLORS = {
+      default: "bg-hw-primary",
+      success: "bg-hw-success",
+      warning: "bg-hw-warning",
+      destructive: "bg-hw-destructive"
+    }.freeze
+
+    def initialize(value:, max: 100, size: :md, color: :default, show_label: false, animated: false, **attrs)
+      @value = value
+      @max = max
+      @size = size
+      @color = color
+      @show_label = show_label
+      @animated = animated
+      @extra_attrs = attrs
+    end
+
+    def percentage
+      return 0 if @max.zero?
+
+      [(@value.to_f / @max * 100).round, 100].min
+    end
+
+    def track_classes
+      merge_classes(
+        "w-full overflow-hidden rounded-full bg-hw-muted",
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+
+    def bar_classes
+      merge_classes(
+        "h-full rounded-full transition-all duration-300",
+        COLORS[@color] || COLORS[:default],
+        @animated ? "animate-pulse" : ""
+      )
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<div class="relative inline-flex items-center justify-center" <%= tag.attributes(@extra_attrs) %>>
+  <svg width="<%= @size %>" height="<%= @size %>" class="-rotate-90">
+    <circle
+      cx="<%= center %>"
+      cy="<%= center %>"
+      r="<%= radius %>"
+      fill="none"
+      stroke-width="4"
+      class="stroke-hw-muted"
+    />
+    <circle
+      cx="<%= center %>"
+      cy="<%= center %>"
+      r="<%= radius %>"
+      fill="none"
+      stroke-width="4"
+      stroke-linecap="round"
+      stroke-dasharray="<%= circumference %>"
+      stroke-dashoffset="<%= stroke_dashoffset %>"
+      class="<%= color_class %> transition-all duration-300"
+    />
+  </svg>
+  <% if @show_label %>
+    <span class="absolute text-sm font-medium"><%= percentage %>%</span>
+  <% end %>
+</div>

data/app/components/hotwirebits/progress_ring_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ProgressRingComponent < Base
+    COLORS = {
+      default: "stroke-hw-primary",
+      success: "stroke-hw-success",
+      warning: "stroke-hw-warning",
+      destructive: "stroke-hw-destructive"
+    }.freeze
+
+    def initialize(value:, max: 100, size: 64, show_label: false, color: :default, **attrs)
+      @value = value
+      @max = max
+      @size = size
+      @show_label = show_label
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    def percentage
+      return 0 if @max.zero?
+
+      [(@value.to_f / @max * 100).round, 100].min
+    end
+
+    def radius
+      (@size - 8) / 2
+    end
+
+    def circumference
+      2 * Math::PI * radius
+    end
+
+    def stroke_dashoffset
+      circumference - (percentage / 100.0) * circumference
+    end
+
+    def color_class
+      COLORS[@color] || COLORS[:default]
+    end
+
+    def center
+      @size / 2
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+<section class="<%= section_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto grid max-w-7xl items-center gap-8 px-6 py-16 lg:grid-cols-2 lg:gap-16 lg:px-8">
+    <div class="flex flex-col items-start gap-4">
+      <% if @badge %>
+        <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ring-1 ring-inset
+                     <%= @variant == :dark || @variant == :gradient ? 'ring-white/30 text-hw-primary-foreground/90' : 'ring-hw-primary/30 text-hw-primary bg-hw-primary/5' %>">
+          <%= @badge %>
+        </span>
+      <% end %>
+      <h2 class="text-3xl font-bold tracking-tight sm:text-4xl"><%= @title %></h2>
+      <% if @description %>
+        <p class="text-lg opacity-80"><%= @description %></p>
+      <% end %>
+      <% if @cta %>
+        <a href="<%= @cta[:href] %>"
+           class="mt-2 inline-flex items-center rounded-lg px-5 py-2.5 text-sm font-semibold transition-colors
+                  <%= @variant == :dark || @variant == :gradient ? 'bg-white text-hw-foreground hover:bg-white/90' : 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' %>">
+          <%= @cta[:label] %>
+          <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
+          </svg>
+        </a>
+      <% end %>
+    </div>
+    <% if @image %>
+      <div class="relative">
+        <img src="<%= @image %>" alt="" class="w-full rounded-xl object-cover shadow-2xl">
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/components/hotwirebits/promo_section_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class PromoSectionComponent < Base
+    VARIANTS = {
+      default: "bg-white",
+      dark: "bg-hw-foreground text-hw-background",
+      gradient: "bg-gradient-to-br from-hw-primary to-hw-primary/70 text-hw-primary-foreground",
+      light: "bg-hw-muted"
+    }.freeze
+
+    def initialize(title:, badge: nil, description: nil, cta: nil, image: nil, variant: :default, **attrs)
+      @badge = badge
+      @title = title
+      @description = description
+      @cta = cta
+      @image = image
+      @variant = variant
+      @extra_attrs = attrs
+    end
+
+    def section_classes
+      merge_classes(
+        "rounded-2xl overflow-hidden",
+        VARIANTS[@variant] || VARIANTS[:default],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<% qr = modules %>
+<% total = qr.size + @margin * 2 %>
+<div class="<%= merge_classes('inline-block', @extra_attrs.delete(:class)) %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <svg xmlns="http://www.w3.org/2000/svg"
+       width="<%= @size %>"
+       height="<%= @size %>"
+       viewBox="0 0 <%= total %> <%= total %>"
+       shape-rendering="crispEdges">
+    <rect width="<%= total %>" height="<%= total %>" fill="white"/>
+    <% qr.each_with_index do |row, r| %>
+      <% row.each_with_index do |cell, c| %>
+        <% if cell == 1 %>
+          <rect x="<%= c + @margin %>" y="<%= r + @margin %>" width="1" height="1" fill="black"/>
+        <% end %>
+      <% end %>
+    <% end %>
+  </svg>
+</div>

data/app/components/hotwirebits/qr_code_component.rb

@@ -0,0 +1,177 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class QrCodeComponent < Base
+    def initialize(value:, size: 200, margin: 4, **attrs)
+      @value = value
+      @size = size
+      @margin = margin
+      @extra_attrs = attrs
+    end
+
+    def modules
+      encode_qr(@value)
+    end
+
+    private
+
+    def encode_qr(data)
+      # Simplified QR encoding using byte mode, version 2 (25x25)
+      # Uses a numeric/alphanumeric detection then byte fallback
+      version = determine_version(data.bytesize)
+      size = 17 + version * 4
+      matrix = Array.new(size) { Array.new(size, 0) }
+      reserved = Array.new(size) { Array.new(size, false) }
+
+      place_finder_patterns(matrix, reserved, size)
+      place_timing_patterns(matrix, reserved, size)
+      place_alignment_patterns(matrix, reserved, version) if version >= 2
+      place_dark_module(matrix, reserved)
+
+      data_bits = encode_data(data, version)
+      place_data(matrix, reserved, data_bits, size)
+
+      apply_best_mask(matrix, reserved, size)
+
+      place_format_info(matrix, reserved, size, 0)
+
+      matrix
+    end
+
+    def determine_version(byte_len)
+      return 1 if byte_len <= 17
+      return 2 if byte_len <= 32
+      return 3 if byte_len <= 53
+
+      4
+    end
+
+    def place_finder_patterns(matrix, reserved, size)
+      positions = [[0, 0], [0, size - 7], [size - 7, 0]]
+      positions.each do |r, c|
+        7.times do |i|
+          7.times do |j|
+            on_edge = [0, 6].include?(i) || j == 0 || j == 6
+            in_center = i.between?(2, 4) && j.between?(2, 4)
+            matrix[r + i][c + j] = (on_edge || in_center) ? 1 : 0
+            reserved[r + i][c + j] = true
+          end
+        end
+      end
+    end
+
+    def place_timing_patterns(matrix, reserved, size)
+      (8...size - 8).each do |i|
+        unless reserved[6][i]
+          matrix[6][i] = i.even? ? 1 : 0
+          reserved[6][i] = true
+        end
+        unless reserved[i][6]
+          matrix[i][6] = i.even? ? 1 : 0
+          reserved[i][6] = true
+        end
+      end
+    end
+
+    def place_alignment_patterns(matrix, reserved, version)
+      return if version < 2
+
+      positions = alignment_positions(version)
+      positions.each do |r|
+        positions.each do |c|
+          next if reserved[r][c]
+
+          (-2..2).each do |dr|
+            (-2..2).each do |dc|
+              on_edge = dr.abs == 2 || dc.abs == 2
+              center = dr == 0 && dc == 0
+              matrix[r + dr][c + dc] = (on_edge || center) ? 1 : 0
+              reserved[r + dr][c + dc] = true
+            end
+          end
+        end
+      end
+    end
+
+    def alignment_positions(version)
+      return [6, 18] if version == 2
+      return [6, 22] if version == 3
+
+      [6, 26] if version == 4
+    end
+
+    def place_dark_module(matrix, reserved)
+      matrix[-8][8] = 1
+      reserved[matrix.size - 8][8] = true
+    end
+
+    def encode_data(data, version)
+      bits = "0100" # byte mode indicator
+      char_count = data.bytesize
+      cc_bits = (version <= 9) ? 8 : 16
+      bits += char_count.to_s(2).rjust(cc_bits, "0")
+      data.each_byte { |b| bits += b.to_s(2).rjust(8, "0") }
+      cap = data_capacity(version)
+      bits += "0" until bits.size >= cap || bits.size % 8 == 0
+      pad_bytes = %w[11101100 00010001]
+      pi = 0
+      bits += pad_bytes[pi % 2] while bits.size < cap && (pi += 1)
+      bits
+    end
+
+    def data_capacity(version)
+      [128, 224, 352, 512][version - 1]
+    end
+
+    def place_data(matrix, reserved, bits, size)
+      bit_idx = 0
+      upward = true
+      (size - 1).step(1, -2) do |col|
+        col -= 1 if col == 6
+        size.times do |i|
+          r = upward ? (size - 1 - i) : i
+          [col, col - 1].each do |c|
+            next if reserved[r][c]
+
+            matrix[r][c] = (bit_idx < bits.size && bits[bit_idx] == "1") ? 1 : 0
+            bit_idx += 1
+          end
+        end
+        upward = !upward
+      end
+    end
+
+    def apply_best_mask(matrix, reserved, size)
+      mask = ->(r, c) { (r + c).even? }
+      size.times do |r|
+        size.times do |c|
+          next if reserved[r][c]
+
+          matrix[r][c] ^= 1 if mask.call(r, c)
+        end
+      end
+    end
+
+    def place_format_info(matrix, _reserved, size, _mask_pattern)
+      format_bits = "011010101011100"
+      coords1 = (0..5).to_a + [7, 8]
+      coords2 = (0..7).reverse_each.to_a
+      coords1.each_with_index do |i, j|
+        matrix[8][i] = (format_bits[j] == "1") ? 1 : 0
+        matrix[i][8] = begin
+          (format_bits[j + 7] == "1") ? 1 : 0
+        rescue
+          nil
+        end
+      end
+      coords2.each_with_index do |i, j|
+        matrix[size - 1 - i][8] = (format_bits[j] == "1") ? 1 : 0
+        matrix[8][size - 1 - i] = begin
+          (format_bits[j + 7] == "1") ? 1 : 0
+        rescue
+          nil
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<label class="flex items-center gap-2 cursor-pointer" <%= tag.attributes(@extra_attrs) %>>
+  <input type="radio" name="<%= @name %>" value="<%= @value %>" <%= 'checked' if @checked %> <%= 'disabled' if @disabled %> class="peer aspect-square shrink-0 rounded-full border border-hw-input bg-hw-background text-hw-primary 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 <%= SIZES[@size] || 'h-4 w-4' %>">
+  <% if @label %>
+    <span class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"><%= @label %></span>
+  <% end %>
+</label>

data/app/components/hotwirebits/radio_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class RadioComponent < 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, disabled: false, label: nil, size: :md, **attrs)
+      @name = name
+      @value = value
+      @checked = checked
+      @disabled = disabled
+      @label = label
+      @size = size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_element
+      tag.input(
+        type: "radio",
+        name: @name,
+        value: @value,
+        checked: @checked,
+        disabled: @disabled,
+        class: merge_classes(
+          "peer aspect-square shrink-0 rounded-full border border-hw-input bg-hw-background text-hw-primary",
+          "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",
+          SIZES[@size] || SIZES[:md]
+        ),
+        **@extra_attrs
+      )
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<% left_pct = ((@value_min - @min).to_f / [@max - @min, 1].max) * 100 %>
+<% width_pct = ((@value_max - @value_min).to_f / [@max - @min, 1].max) * 100 %>
+<div class="relative w-full h-6" data-controller="hw-range-slider" data-hw-range-slider-min-value="<%= @min %>" data-hw-range-slider-max-value="<%= @max %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="absolute top-1/2 -translate-y-1/2 h-2 w-full rounded-full bg-hw-muted">
+    <div class="absolute h-full rounded-full bg-hw-primary" style="left: <%= left_pct %>%; width: <%= width_pct %>%" data-hw-range-slider-target="track"></div>
+  </div>
+  <input type="range" name="<%= @name_min %>" value="<%= @value_min %>" min="<%= @min %>" max="<%= @max %>" step="<%= @step %>" <%= 'disabled' if @disabled %> class="absolute top-0 left-0 w-full h-2 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-hw-primary [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-hw-background [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-hw-background z-10" data-action="input->hw-range-slider#min" data-hw-range-slider-target="min">
+  <input type="range" name="<%= @name_max %>" value="<%= @value_max %>" min="<%= @min %>" max="<%= @max %>" step="<%= @step %>" <%= 'disabled' if @disabled %> class="absolute top-0 left-0 w-full h-2 appearance-none bg-transparent pointer-events-none [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-hw-primary [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-hw-background [&::-webkit-slider-thumb]:shadow [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-hw-background z-20" data-action="input->hw-range-slider#max" data-hw-range-slider-target="max">
+</div>

data/app/components/hotwirebits/range_slider_component.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class RangeSliderComponent < Base
+    def initialize(name_min: "min", name_max: "max", min: 0, max: 100, value_min: 25, value_max: 75, step: 1,
+      disabled: false, **attrs)
+      @name_min = name_min
+      @name_max = name_max
+      @min = min.to_i
+      @max = max.to_i
+      @value_min = value_min.to_i
+      @value_max = value_max.to_i
+      @step = step.to_i
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def track_element
+      left_pct = ((@value_min - @min).to_f / [@max - @min, 1].max) * 100
+      width_pct = ((@value_max - @value_min).to_f / [@max - @min, 1].max) * 100
+
+      tag.div(class: "absolute top-1/2 -translate-y-1/2 h-2 w-full rounded-full bg-hw-muted") do
+        tag.div(
+          class: "absolute h-full rounded-full bg-hw-primary",
+          style: "left: #{left_pct}%; width: #{width_pct}%",
+          data: {rb_range_slider_target: "track"}
+        )
+      end
+    end
+
+    def input_element(which)
+      value = (which == :min) ? @value_min : @value_max
+      tag.input(
+        type: "range",
+        name: (which == :min) ? @name_min : @name_max,
+        value: value,
+        min: @min,
+        max: @max,
+        step: @step,
+        disabled: @disabled,
+        class: input_classes(which),
+        data: {action: "input->hw-range-slider##{which}", rb_range_slider_target: which.to_s}
+      )
+    end
+
+    def input_classes(which)
+      merge_classes(
+        "absolute top-0 left-0 w-full h-2 appearance-none bg-transparent pointer-events-none",
+        "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-hw-primary [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-hw-background [&::-webkit-slider-thumb]:shadow",
+        "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-hw-primary [&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-hw-background [&::-moz-range-thumb]:shadow",
+        (which == :min) ? "z-10" : "z-20"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<div class="flex items-center gap-0.5" data-controller="hw-rating" <%= tag.attributes(@extra_attrs) %>
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-rating-target="input">
+  <% @max.times do |i| %>
+    <% filled = (i + 1) <= @value %>
+    <button type="button" class="cursor-pointer <%= filled ? 'text-hw-warning' : 'text-hw-muted-foreground' %>" <%= 'disabled' if @readonly %> data-action="<%= 'click->hw-rating#select' unless @readonly %>" data-value="<%= i + 1 %>">
+      <svg class="<%= SIZES[@size] || 'h-5 w-5' %>" fill="<%= filled ? 'currentColor' : 'none' %>" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

data/app/components/hotwirebits/rating_component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class RatingComponent < Base
+    SIZES = {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-8 w-8"
+    }.freeze
+
+    def initialize(name: nil, value: 0, max: 5, size: :md, readonly: false, allow_half: false, icon: :star, **attrs)
+      @name = name
+      @value = value
+      @max = max
+      @size = size
+      @readonly = readonly
+      @allow_half = allow_half
+      @icon = icon
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: @value, data: {rb_rating_target: "input"})
+    end
+
+    def star_button(index)
+      filled = index <= @value
+      tag.button(
+        type: "button",
+        class: merge_classes("text-hw-muted-foreground", filled ? "text-hw-warning" : ""),
+        data: {action: @readonly ? nil : "click->hw-rating#select", value: index},
+        disabled: @readonly
+      ) do
+        if @icon == :star
+          tag.svg(class: SIZES[@size] || SIZES[:md], fill: filled ? "currentColor" : "none", stroke: "currentColor",
+            viewBox: "0 0 24 24") do
+            tag.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "1.5",
+              d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z")
+          end
+        else
+          tag.svg(class: SIZES[@size] || SIZES[:md], fill: filled ? "currentColor" : "none", stroke: "currentColor",
+            viewBox: "0 0 24 24") do
+            tag.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "1.5",
+              d: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z")
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<div data-controller="hw-resizable" class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @direction == :horizontal %>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel1">
+      <%= left %>
+    </div>
+    <div class="<%= handle_classes %>" data-hw-resizable-target="handle" data-action="pointerdown->hw-resizable#startResize"></div>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel2">
+      <%= right %>
+    </div>
+  <% else %>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel1">
+      <%= top %>
+    </div>
+    <div class="<%= handle_classes %>" data-hw-resizable-target="handle" data-action="pointerdown->hw-resizable#startResize"></div>
+    <div class="<%= panel_classes %>" data-hw-resizable-target="panel2">
+      <%= bottom %>
+    </div>
+  <% end %>
+</div>