hotwirebits 0.1.0

data/app/components/hotwirebits/alert_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AlertComponent < Base
+    TYPES = {
+      info: {bg: "bg-hw-info/10 text-hw-info border-hw-info/30",
+             icon: "M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"},
+      success: {bg: "bg-hw-success/10 text-hw-success border-hw-success/30",
+                icon: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"},
+      warning: {bg: "bg-hw-warning/10 text-hw-warning border-hw-warning/30",
+                icon: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"},
+      error: {bg: "bg-hw-destructive/10 text-hw-destructive border-hw-destructive/30",
+              icon: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"}
+    }.freeze
+
+    def initialize(title: nil, message: nil, type: :info, dismissible: false, icon: true, **attrs)
+      @title = title
+      @message = message
+      @type = type
+      @dismissible = dismissible
+      @icon = icon
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def type_config
+      TYPES[@type] || TYPES[:info]
+    end
+
+    def alert_classes
+      merge_classes(
+        "relative w-full rounded-lg border p-4",
+        type_config[:bg],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div data-controller="hw-dialog"
+     data-hw-dialog-open-value="<%= @open %>">
+  <div class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="overlay"
+       aria-hidden="true"></div>
+  <div class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-hw-border bg-hw-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg"
+       data-state="<%= @open ? 'open' : 'closed' %>"
+       data-hw-dialog-target="panel"
+       role="alertdialog"
+       aria-modal="true"
+       <%= tag.attributes(@extra_attrs) %>>
+    <div class="flex flex-col space-y-2 text-center sm:text-left">
+      <% if @title %>
+        <h2 class="text-lg font-semibold tracking-tight"><%= @title %></h2>
+      <% end %>
+      <% if @description %>
+        <p class="text-sm text-hw-muted-foreground"><%= @description %></p>
+      <% end %>
+    </div>
+    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+      <button type="button" class="<%= cancel_classes %>" data-action="click->hw-dialog#close">
+        <%= cancel_action? ? cancel_action : @cancel_label %>
+      </button>
+      <button type="button" class="<%= confirm_classes %>">
+        <%= confirm_action? ? confirm_action : @confirm_label %>
+      </button>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/alert_dialog_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AlertDialogComponent < Base
+    renders_one :confirm_action
+    renders_one :cancel_action
+
+    VARIANTS = {
+      default: "bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90",
+      destructive: "bg-hw-destructive text-hw-destructive-foreground hover:bg-hw-destructive/90"
+    }.freeze
+
+    def initialize(title: nil, description: nil, confirm_label: "Confirm", cancel_label: "Cancel", variant: :default,
+      open: false, **attrs)
+      @title = title
+      @description = description
+      @confirm_label = confirm_label
+      @cancel_label = cancel_label
+      @variant = variant
+      @open = open
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def confirm_classes
+      merge_classes(
+        "inline-flex items-center justify-center rounded-md text-sm font-medium",
+        "ring-offset-hw-background transition-colors focus-visible:outline-none focus-visible:ring-2",
+        "focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "h-10 px-4 py-2",
+        VARIANTS[@variant] || VARIANTS[:default]
+      )
+    end
+
+    def cancel_classes
+      "inline-flex items-center justify-center rounded-md text-sm font-medium border border-hw-input bg-hw-background hover:bg-hw-accent hover:text-hw-accent-foreground h-10 px-4 py-2 ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2"
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<a href="<%= @href %>" class="inline-flex items-center gap-1.5 text-sm text-hw-primary hover:text-hw-primary/80 transition-colors scroll-smooth" <%= tag.attributes(@extra_attrs) %>>
+  <% if @icon %>
+    <span class="h-4 w-4"><%= safe_svg(@icon) %></span>
+<% end %>
+<% if @label %>
+  <span><%= @label %></span>
+<% end %>
+<%= content if content %>
+</a>

data/app/components/hotwirebits/anchor_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AnchorComponent < Base
+    def initialize(href:, label: nil, icon: nil, **attrs)
+      @href = href
+      @label = label
+      @icon = icon
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="<%= container_classes %>" data-controller="hw-angle-slider" data-hw-angle-slider-value-value="<%= @value %>" <%= tag.attributes(@extra_attrs) %>>
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-angle-slider-target="hidden">
+  <svg width="120" height="120" viewBox="0 0 120 120" class="cursor-pointer" data-hw-angle-slider-target="svg" data-action="mousedown->hw-angle-slider#startDrag touchstart->hw-angle-slider#startDrag">
+    <circle cx="60" cy="60" r="50" fill="none" class="stroke-hw-muted" stroke-width="4"/>
+    <circle cx="60" cy="60" r="50" fill="none" class="stroke-hw-primary" stroke-width="4" stroke-dasharray="<%= (2 * Math::PI * 50 * @value / 360.0).round(2) %> <%= (2 * Math::PI * 50).round(2) %>" stroke-linecap="round" transform="rotate(-90 60 60)"/>
+    <circle cx="<%= (60 + 50 * Math.cos(radians)).round(2) %>" cy="<%= (60 + 50 * Math.sin(radians)).round(2) %>" r="8" fill="currentColor" class="text-hw-primary drop-shadow-sm" data-hw-angle-slider-target="handle"/>
+  </svg>
+  <span class="text-sm font-medium text-hw-foreground" data-hw-angle-slider-target="label"><%= @value %>°</span>
+    </div>

data/app/components/hotwirebits/angle_slider_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AngleSliderComponent < Base
+    def initialize(name: nil, value: 0, **attrs)
+      @name = name
+      @value = value.to_i.clamp(0, 360)
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("relative inline-flex flex-col items-center gap-2", @extra_attrs.delete(:class))
+    end
+
+    def radians
+      (@value - 90) * Math::PI / 180.0
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<span data-controller="hw-animated-number"
+      data-hw-animated-number-value-value="<%= @value %>"
+      data-hw-animated-number-duration-value="<%= @duration %>"
+      data-hw-animated-number-easing-value="<%= easing_value %>"
+      class="tabular-nums inline-block"
+      <%= tag.attributes(@extra_attrs) %>>
+  <%= @prefix %><span data-hw-animated-number-target="output"><%= number_with_delimiter(@value) %></span><%= @suffix %>
+</span>

data/app/components/hotwirebits/animated_number_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AnimatedNumberComponent < Base
+    EASINGS = {
+      linear: "linear",
+      ease: "ease",
+      ease_in: "ease-in",
+      ease_out: "ease-out",
+      ease_in_out: "ease-in-out"
+    }.freeze
+
+    def initialize(value: 0, duration: 1000, prefix: "", suffix: "", easing: :ease_out, **attrs)
+      @value = value
+      @duration = duration
+      @prefix = prefix
+      @suffix = suffix
+      @easing = easing
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def easing_value
+      EASINGS[@easing] || EASINGS[:ease_out]
+    end
+  end
+end

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

@@ -0,0 +1,22 @@
+<div class="flex h-screen flex-col" <%= tag.attributes(@extra_attrs) %>>
+  <% if header? %>
+    <header class="shrink-0 border-b border-hw-border bg-hw-background">
+      <%= header %>
+    </header>
+  <% end %>
+  <div class="flex flex-1 overflow-hidden">
+    <% if sidebar? %>
+      <aside class="<%= @sidebar_collapsed ? 'w-16' : 'w-64' %> shrink-0 border-r border-hw-border bg-hw-background overflow-y-auto transition-[width] duration-200">
+        <%= sidebar %>
+      </aside>
+    <% end %>
+    <main class="flex-1 overflow-y-auto bg-hw-background">
+      <%= body? ? body : content %>
+    </main>
+  </div>
+  <% if footer? %>
+    <footer class="shrink-0 border-t border-hw-border bg-hw-background">
+      <%= footer %>
+    </footer>
+  <% end %>
+</div>

data/app/components/hotwirebits/app_shell_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AppShellComponent < Base
+    renders_one :header
+    renders_one :sidebar
+    renders_one :body
+    renders_one :footer
+
+    def initialize(sidebar_collapsed: false, **attrs)
+      @sidebar_collapsed = sidebar_collapsed
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<div class="<%= ratio_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</div>

data/app/components/hotwirebits/aspect_ratio_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AspectRatioComponent < Base
+    RATIOS = {
+      "16_9" => "aspect-video",
+      "4_3" => "aspect-[4/3]",
+      "1_1" => "aspect-square",
+      "21_9" => "aspect-[21/9]",
+      :custom => nil
+    }.freeze
+
+    def initialize(ratio: "16_9", custom_ratio: nil, **attrs)
+      @ratio = ratio.to_s
+      @custom_ratio = custom_ratio
+      @extra_attrs = attrs
+    end
+
+    def ratio_classes
+      merge_classes(
+        @custom_ratio ? "aspect-[#{@custom_ratio}]" : RATIOS[@ratio],
+        "w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,63 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="rounded-xl border border-hw-border bg-hw-card p-8 shadow-sm">
+    <div class="text-center mb-6">
+      <h2 class="text-2xl font-bold text-hw-foreground">
+        <%= sign_up? ? 'Create an account' : 'Welcome back' %>
+      </h2>
+      <p class="mt-1 text-sm text-hw-muted-foreground">
+        <%= sign_up? ? 'Sign up to get started' : 'Sign in to your account' %>
+      </p>
+    </div>
+    <% if @providers.any? %>
+      <div class="space-y-2 mb-6">
+        <% @providers.each do |provider| %>
+          <button type="button"
+                  class="w-full inline-flex items-center justify-center gap-2 rounded-lg border border-hw-border bg-hw-background h-10 px-4 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors">
+            <%= safe_svg(provider_icon(provider)) %>
+            Continue with <%= provider.to_s.capitalize %>
+          </button>
+        <% end %>
+      </div>
+      <div class="relative mb-6">
+        <div class="absolute inset-0 flex items-center">
+          <div class="w-full border-t border-hw-border"></div>
+        </div>
+        <div class="relative flex justify-center text-xs"><span class="bg-hw-card px-2 text-hw-muted-foreground">or continue with email</span></div>
+      </div>
+    <% end %>
+    <form action="<%= @action_url %>" method="post" class="space-y-4">
+      <% if sign_up? %>
+        <div>
+          <label for="name" class="block text-sm font-medium text-hw-foreground mb-1.5">Name</label>
+          <input type="text" name="name" id="name" placeholder="Your name"
+                 class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+        </div>
+      <% end %>
+      <div>
+        <label for="email" class="block text-sm font-medium text-hw-foreground mb-1.5">Email</label>
+        <input type="email" name="email" id="email" placeholder="you@example.com" required
+               class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+      </div>
+      <div>
+        <div class="flex items-center justify-between mb-1.5">
+          <label for="password" class="block text-sm font-medium text-hw-foreground">Password</label>
+          <% if @show_forgot && !sign_up? %>
+            <a href="/users/password/new" class="text-xs text-hw-primary hover:underline">Forgot password?</a>
+          <% end %>
+        </div>
+        <input type="password" name="password" id="password" placeholder="••••••••" required
+               class="w-full h-10 rounded-lg border border-hw-border bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+      </div>
+      <button type="submit"
+              class="w-full inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-10 px-4 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+        <%= sign_up? ? 'Create account' : 'Sign in' %>
+      </button>
+    </form>
+    <p class="mt-6 text-center text-sm text-hw-muted-foreground">
+      <%= sign_up? ? 'Already have an account?' : "Don't have an account?" %>
+      <a href="<%= sign_up? ? '/users/sign_in' : '/users/sign_up' %>" class="text-hw-primary hover:underline font-medium">
+        <%= sign_up? ? 'Sign in' : 'Sign up' %>
+      </a>
+    </p>
+  </div>
+</div>

data/app/components/hotwirebits/auth_block_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AuthBlockComponent < Base
+    def initialize(type: :sign_in, providers: [], show_forgot: true, action_url: nil, **attrs)
+      @type = type
+      @providers = providers
+      @show_forgot = show_forgot
+      @action_url = action_url || ((type == :sign_up) ? "/users" : "/users/sign_in")
+      @extra_attrs = attrs
+    end
+
+    def sign_up?
+      @type == :sign_up
+    end
+
+    def container_classes
+      merge_classes(
+        "w-full max-w-md mx-auto",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def provider_icon(provider)
+      case provider.to_sym
+      when :google
+        '<svg class="h-5 w-5" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>'
+      when :github
+        '<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>'
+      when :apple
+        '<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="relative" data-controller="hw-autocomplete" data-hw-autocomplete-url-value="<%= @url %>" data-hw-autocomplete-min-chars-value="<%= @min_chars %>" <%= tag.attributes(@extra_attrs) %>>
+  <input type="text" placeholder="<%= @placeholder %>" value="<%= @value %>" <%= 'disabled' if @disabled %> autocomplete="off" class="flex w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm 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" data-hw-autocomplete-target="input" data-action="input->hw-autocomplete#search keydown->hw-autocomplete#keydown">
+  <ul class="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-hw-border bg-hw-popover shadow-md hidden" role="listbox" data-hw-autocomplete-target="results"></ul>
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-autocomplete-target="hidden">
+</div>

data/app/components/hotwirebits/autocomplete_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AutocompleteComponent < Base
+    def initialize(name:, url:, placeholder: "Search...", min_chars: 2, value: nil, disabled: false, **attrs)
+      @name = name
+      @url = url
+      @placeholder = placeholder
+      @min_chars = min_chars
+      @value = value
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def input_element
+      tag.input(
+        type: "text",
+        placeholder: @placeholder,
+        value: @value,
+        disabled: @disabled,
+        class: merge_classes(
+          "flex w-full rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm 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"
+        ),
+        autocomplete: "off",
+        data: {
+          rb_autocomplete_target: "input",
+          action: "input->hw-autocomplete#search keydown->hw-autocomplete#keydown"
+        }
+      )
+    end
+
+    def results_element
+      tag.ul(
+        class: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-hw-border bg-hw-popover shadow-md hidden",
+        role: "listbox",
+        data: {rb_autocomplete_target: "results"}
+      )
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<div class="relative inline-flex" <%= tag.attributes(@extra_attrs) %>>
+  <% if @src %>
+    <img src="<%= @src %>" alt="<%= @alt %>" class="<%= SIZES[@size] || 'h-10 w-10 text-sm' %> rounded-full object-cover">
+  <% elsif @initials %>
+    <div class="<%= SIZES[@size] || 'h-10 w-10 text-sm' %> rounded-full bg-hw-muted flex items-center justify-center font-medium text-hw-muted-foreground">
+      <%= @initials %>
+    </div>
+  <% else %>
+    <div class="<%= SIZES[@size] || 'h-10 w-10 text-sm' %> rounded-full bg-hw-muted flex items-center justify-center text-hw-muted-foreground">
+      <svg class="h-[60%] w-[60%]" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    </div>
+  <% end %>
+  <% if @status %>
+    <span class="absolute block h-2.5 w-2.5 rounded-full ring-2 ring-white <%= @status == :online ? 'bg-hw-success' : @status == :busy ? 'bg-hw-destructive' : @status == :away ? 'bg-hw-warning' : 'bg-hw-muted-foreground/60' %> -bottom-0.5 -right-0.5"></span>
+  <% end %>
+</div>

data/app/components/hotwirebits/avatar_component.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AvatarComponent < Base
+    SIZES = {
+      xs: "h-6 w-6 text-[10px]",
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-16 w-16 text-lg"
+    }.freeze
+
+    STATUS_COLORS = {
+      online: "bg-hw-success",
+      offline: "bg-hw-muted-foreground/60",
+      busy: "bg-hw-destructive",
+      away: "bg-hw-warning"
+    }.freeze
+
+    def initialize(src: nil, alt: nil, initials: nil, fallback: nil, size: :md, status: nil,
+      status_position: :bottom_right, **attrs)
+      @src = src
+      @alt = alt || ""
+      @initials = initials
+      @fallback = fallback
+      @size = size
+      @status = status
+      @status_position = status_position
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def avatar_content
+      size_classes = SIZES[@size] || SIZES[:md]
+
+      if @src
+        tag.img(src: @src, alt: @alt, class: merge_classes(size_classes, "rounded-full object-cover"))
+      elsif @initials
+        tag.div(@initials,
+          class: merge_classes(size_classes,
+            "rounded-full bg-hw-muted flex items-center justify-center font-medium text-hw-muted-foreground"))
+      else
+        tag.div(class: merge_classes(size_classes,
+          "rounded-full bg-hw-muted flex items-center justify-center text-hw-muted-foreground")) do
+          tag.svg(class: "h-[60%] w-[60%]", fill: "currentColor", viewBox: "0 0 24 24") do
+            tag.path(d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z")
+          end
+        end
+      end
+    end
+
+    def status_indicator
+      positions = {
+        top_right: "-top-0.5 -right-0.5",
+        top_left: "-top-0.5 -left-0.5",
+        bottom_right: "-bottom-0.5 -right-0.5",
+        bottom_left: "-bottom-0.5 -left-0.5"
+      }
+      tag.span(class: merge_classes(
+        "absolute block h-2.5 w-2.5 rounded-full ring-2 ring-white",
+        STATUS_COLORS[@status] || STATUS_COLORS[:offline],
+        positions[@status_position] || positions[:bottom_right]
+      ))
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="absolute inset-0 bg-no-repeat" style="background-image: url('<%= @src %>'); background-size: <%= @size %>; background-position: <%= @position %>;"></div>
+  <% if @overlay %>
+    <div class="absolute inset-0 bg-black/40"></div>
+  <% end %>
+  <div class="relative">
+    <%= content %>
+  </div>
+</div>

data/app/components/hotwirebits/background_image_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class BackgroundImageComponent < Base
+    def initialize(src:, size: :cover, position: "center", overlay: false, **attrs)
+      @src = src
+      @size = size
+      @position = position
+      @overlay = overlay
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("relative", @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div class="<%= badge_classes %>" data-controller="<%= 'hw-badge' if @removable %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @dot %>
+    <span class="h-1.5 w-1.5 rounded-full bg-current mr-1"></span>
+  <% end %>
+  <%= content || @label %>
+  <% if @removable %>
+    <button type="button" class="ml-1 -mr-0.5 h-3.5 w-3.5 rounded-full p-0.5 hover:bg-white/20 focus:outline-none" data-action="click->hw-badge#dismiss">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-2.5 w-2.5">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

data/app/components/hotwirebits/badge_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class BadgeComponent < Base
+    VARIANTS = {
+      default: "border-transparent bg-hw-primary text-hw-primary-foreground",
+      secondary: "border-transparent bg-hw-secondary text-hw-secondary-foreground",
+      destructive: "border-transparent bg-hw-destructive text-hw-destructive-foreground",
+      outline: "text-hw-foreground",
+      success: "border-transparent bg-hw-success text-hw-success-foreground",
+      warning: "border-transparent bg-hw-warning text-hw-warning-foreground",
+      info: "border-transparent bg-hw-info text-hw-info-foreground"
+    }.freeze
+
+    SIZES = {
+      sm: "px-1.5 py-0 text-[10px]",
+      md: "px-2.5 py-0.5 text-xs",
+      lg: "px-3 py-1 text-sm"
+    }.freeze
+
+    def initialize(label: nil, variant: :default, size: :md, dot: false, removable: false, dismiss_url: nil, **attrs)
+      @label = label
+      @variant = variant
+      @size = size
+      @dot = dot
+      @removable = removable
+      @dismiss_url = dismiss_url
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def badge_classes
+      merge_classes(
+        "inline-flex items-center rounded-full border font-semibold transition-colors",
+        "focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2",
+        VARIANTS[@variant] || VARIANTS[:default],
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+
+    def dismiss_button
+      tag.button(
+        type: "button",
+        class: "ml-1 -mr-0.5 h-3.5 w-3.5 rounded-full p-0.5 hover:bg-white/20",
+        data: {action: "click->hw-badge#dismiss"}
+      ) do
+        tag.svg(xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none",
+          stroke: "currentColor", stroke_width: "2", class: "h-2.5 w-2.5") do
+          tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M6 18L18 6M6 6l12 12")
+        end
+      end
+    end
+  end
+end