hotwirebits 0.1.0

data/app/components/hotwirebits/flex_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FlexComponent < Base
+    DIRECTIONS = {row: "flex-row", column: "flex-col"}.freeze
+    WRAPS = {wrap: "flex-wrap", nowrap: "flex-nowrap", reverse: "flex-wrap-reverse"}.freeze
+    JUSTIFIES = {
+      start: "justify-start", end: "justify-end", center: "justify-center",
+      between: "justify-between", around: "justify-around", evenly: "justify-evenly"
+    }.freeze
+    ALIGNS = {
+      start: "items-start", end: "items-end", center: "items-center",
+      baseline: "items-baseline", stretch: "items-stretch"
+    }.freeze
+
+    def initialize(direction: :row, wrap: nil, justify: nil, align: nil, gap: nil, **attrs)
+      @direction = direction
+      @wrap = wrap
+      @justify = justify
+      @align = align
+      @gap = gap
+      @extra_attrs = attrs
+    end
+
+    def flex_classes
+      merge_classes(
+        "flex",
+        DIRECTIONS[@direction],
+        @wrap && WRAPS[@wrap],
+        @justify && JUSTIFIES[@justify],
+        @align && ALIGNS[@align],
+        @gap && "gap-#{@gap}",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<div class="relative" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+  <label for="<%= @name %>" class="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-hw-muted-foreground transition-all pointer-events-none peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-2 peer-focus:text-xs peer-focus:text-hw-primary peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs"><%= @label %></label>
+</div>

data/app/components/hotwirebits/float_label_component.rb

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

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

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

data/app/components/hotwirebits/fluid_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FluidComponent < Base
+    def initialize(**attrs)
+      @extra_attrs = attrs
+    end
+
+    def fluid_classes
+      merge_classes("w-full", @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+<div class="relative inline-block" data-controller="hw-dropdown" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          class="inline-flex items-center gap-1 text-sm font-medium text-hw-foreground hover:text-hw-primary"
+          data-action="click->hw-dropdown#toggle mouseenter->hw-dropdown#open">
+    <%= @trigger_label %>
+    <svg class="h-4 w-4" 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="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
+    </svg>
+  </button>
+  <div class="absolute z-50 hidden w-72 rounded-lg border border-hw-border bg-white p-2 shadow-xl"
+       data-hw-dropdown-target="menu"
+       data-action="mouseleave->hw-dropdown#close"
+    style="position: absolute;" class="<%= menu_position %>">
+    <div class="space-y-1">
+      <% @items.each do |item| %>
+        <a href="<%= item[:href] %>"
+           class="flex items-start gap-3 rounded-lg p-3 text-sm transition-colors hover:bg-hw-muted">
+          <% if item[:icon] %>
+            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-hw-primary/10 text-hw-primary">
+              <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="<%= item[:icon] %>"/>
+              </svg>
+            </div>
+          <% end %>
+          <div>
+                  <p class="font-medium text-hw-foreground"><%= item[:label] %></p>
+                  <% if item[:description] %>
+                    <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= item[:description] %></p>
+                  <% end %>
+                </div>
+              </a>
+            <% end %>
+          </div>
+        </div>
+      </div>

data/app/components/hotwirebits/flyout_menu_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FlyoutMenuComponent < Base
+    POSITIONS = {
+      bottom_start: "left-0 top-full mt-1",
+      bottom_end: "right-0 top-full mt-1",
+      top_start: "left-0 bottom-full mb-1",
+      top_end: "right-0 bottom-full mb-1",
+      right_start: "left-full top-0 ml-1",
+      left_start: "right-full top-0 mr-1"
+    }.freeze
+
+    def initialize(trigger_label:, items: [], position: :bottom_start, **attrs)
+      @trigger_label = trigger_label
+      @items = items
+      @position = position
+      @extra_attrs = attrs
+    end
+
+    def menu_position
+      POSITIONS[@position] || POSITIONS[:bottom_start]
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+<footer class="border-t border-hw-border bg-hw-background" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-screen-xl px-4 py-12">
+    <div class="grid gap-8 sm:grid-cols-2 md:grid-cols-<%= [@columns.size + 1, 4].min %>">
+      <div>
+        <% if @brand %>
+          <a href="/" class="text-lg font-semibold text-hw-foreground"><%= @brand %></a>
+        <% end %>
+        <% if @social_links.any? %>
+          <div class="mt-4 flex gap-4">
+            <% @social_links.each do |link| %>
+              <a href="<%= link[:href] %>" class="text-hw-muted-foreground hover:text-hw-foreground transition-colors" aria-label="<%= link[:label] %>" target="_blank" rel="noopener noreferrer">
+                <% if link[:icon] %>
+                  <span class="h-5 w-5"><%= safe_svg(link[:icon]) %></span>
+                <% else %>
+                  <span class="text-sm"><%= link[:label] %></span>
+                <% end %>
+              </a>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% @columns.each do |col| %>
+        <div>
+          <h3 class="mb-3 text-sm font-semibold text-hw-foreground"><%= col[:title] %></h3>
+          <ul class="space-y-2">
+            <% col[:links].each do |link| %>
+              <li>
+                <a href="<%= link[:href] %>" class="text-sm text-hw-muted-foreground hover:text-hw-foreground transition-colors"><%= link[:label] %></a>
+              </li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% if @copyright %>
+    <div class="border-t border-hw-border">
+      <div class="mx-auto max-w-screen-xl px-4 py-4">
+        <p class="text-center text-xs text-hw-muted-foreground"><%= @copyright %></p>
+      </div>
+    </div>
+  <% end %>
+</footer>

data/app/components/hotwirebits/footer_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FooterComponent < Base
+    def initialize(brand: nil, copyright: nil, columns: nil, sections: nil, social_links: [], **attrs)
+      @brand = brand
+      @copyright = copyright
+      @columns = sections || columns || []
+      @social_links = social_links
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<fieldset class="space-y-4" <%= tag.attributes(@extra_attrs) %>>
+  <% if @legend %>
+    <legend class="text-base font-semibold text-hw-foreground"><%= @legend %></legend>
+  <% end %>
+  <% if @description %>
+    <p class="text-sm text-hw-muted-foreground"><%= @description %></p>
+  <% end %>
+  <%= content %>
+</fieldset>

data/app/components/hotwirebits/form_fieldset_component.rb

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

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

@@ -0,0 +1,31 @@
+<% if @horizontal %>
+  <div class="grid grid-cols-4 items-start gap-4" <%= tag.attributes(@extra_attrs) %>>
+    <div class="pt-2">
+      <% if @label %>
+        <label for="<%= @name %>" class="text-sm font-medium text-hw-foreground"><%= @label %><% if @required %> <span class="text-hw-destructive">*</span><% end %></label>
+      <% end %>
+      <% if @hint %>
+        <p class="text-xs text-hw-muted-foreground mt-0.5"><%= @hint %></p>
+      <% end %>
+    </div>
+    <div class="col-span-3">
+      <%= content %>
+      <% if @error %>
+        <p class="text-xs text-hw-destructive mt-1"><%= @error %></p>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <div class="space-y-2" <%= tag.attributes(@extra_attrs) %>>
+    <% if @label %>
+      <label for="<%= @name %>" class="text-sm font-medium leading-none"><%= @label %><% if @required %> <span class="text-hw-destructive">*</span><% end %></label>
+    <% end %>
+    <%= content %>
+    <% if @hint && !@error %>
+      <p class="text-xs text-hw-muted-foreground"><%= @hint %></p>
+    <% end %>
+    <% if @error %>
+      <p class="text-xs text-hw-destructive"><%= @error %></p>
+    <% end %>
+  </div>
+<% end %>

data/app/components/hotwirebits/form_group_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class FormGroupComponent < Base
+    def initialize(label: nil, hint: nil, error: nil, required: false, name: nil, horizontal: false, **attrs)
+      @label = label
+      @hint = hint
+      @error = error
+      @required = required
+      @name = name
+      @horizontal = horizontal
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<div class="<%= container_classes %>"
+     <% if @with_lightbox %>data-controller="hw-lightbox"<% end %>
+     <%= tag.attributes(@extra_attrs) %>>
+  <% @images.each_with_index do |image, index| %>
+    <figure class="group relative overflow-hidden rounded-lg">
+      <img src="<%= image[:src] %>" alt="<%= image[:alt] %>"
+           class="aspect-square w-full object-cover transition-transform duration-300 group-hover:scale-105"
+           <% if @with_lightbox %>
+             data-action="click->hw-lightbox#open"
+      data-hw-lightbox-index-param="<%= index %>"
+      role="button" tabindex="0"
+    <% end %>>
+    <% if image[:caption] %>
+      <figcaption class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-3 text-sm text-hw-primary-foreground opacity-0 transition-opacity group-hover:opacity-100">
+        <%= image[:caption] %>
+      </figcaption>
+    <% end %>
+  </figure>
+<% end %>
+<% if @with_lightbox && @images.any? %>
+  <template data-hw-lightbox-target="template">
+    <%= render HotwireBits::LightboxComponent.new(images: @images, current_index: 0) %>
+  </template>
+<% end %>
+</div>

data/app/components/hotwirebits/gallery_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class GalleryComponent < Base
+    def initialize(images: [], columns: 3, gap: 4, with_lightbox: true, **attrs)
+      @images = images
+      @columns = columns
+      @gap = gap
+      @with_lightbox = with_lightbox
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(grid_classes, @extra_attrs.delete(:class))
+    end
+
+    private
+
+    def grid_classes
+      cols = case @columns
+      when 2 then "grid-cols-2"
+      when 4 then "grid-cols-2 md:grid-cols-4"
+      when 5 then "grid-cols-2 md:grid-cols-3 lg:grid-cols-5"
+      else "grid-cols-2 md:grid-cols-3"
+      end
+      "grid #{cols} gap-#{@gap}"
+    end
+  end
+end

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

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

data/app/components/hotwirebits/grid_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class GridComponent < Base
+    COLS = (1..12).index_with { |n| "grid-cols-#{n}" }.freeze
+    SM_COLS = (1..12).index_with { |n| "sm:grid-cols-#{n}" }.freeze
+    MD_COLS = (1..12).index_with { |n| "md:grid-cols-#{n}" }.freeze
+    LG_COLS = (1..12).index_with { |n| "lg:grid-cols-#{n}" }.freeze
+
+    def initialize(columns: 1, gap: nil, sm_cols: nil, md_cols: nil, lg_cols: nil, **attrs)
+      @columns = columns
+      @gap = gap
+      @sm_cols = sm_cols
+      @md_cols = md_cols
+      @lg_cols = lg_cols
+      @extra_attrs = attrs
+    end
+
+    def grid_classes
+      merge_classes(
+        "grid",
+        COLS[@columns],
+        @sm_cols && SM_COLS[@sm_cols],
+        @md_cols && MD_COLS[@md_cols],
+        @lg_cols && LG_COLS[@lg_cols],
+        @gap && "gap-#{@gap}",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

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

data/app/components/hotwirebits/group_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class GroupComponent < Base
+    ALIGNS = {
+      start: "items-start", center: "items-center", end: "items-end",
+      baseline: "items-baseline", stretch: "items-stretch"
+    }.freeze
+
+    def initialize(gap: nil, wrap: false, align: :center, **attrs)
+      @gap = gap
+      @wrap = wrap
+      @align = align
+      @extra_attrs = attrs
+    end
+
+    def group_classes
+      merge_classes(
+        "flex flex-row",
+        @gap && "gap-#{@gap}",
+        @wrap ? "flex-wrap" : "flex-nowrap",
+        ALIGNS[@align],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<header class="<%= header_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto flex h-14 max-w-screen-xl items-center px-4">
+    <% if @brand %>
+      <a href="/" class="mr-6 flex items-center space-x-2 font-semibold text-hw-foreground">
+        <%= @brand %>
+      </a>
+    <% end %>
+    <% if @nav_items.any? %>
+      <nav class="flex items-center gap-6 text-sm">
+        <% @nav_items.each do |item| %>
+          <a href="<%= item[:href] %>"
+             class="<%= merge_classes(
+               'transition-colors hover:text-hw-foreground',
+               item[:active] ? 'text-hw-foreground font-medium' : 'text-hw-muted-foreground'
+             ) %>">
+            <%= item[:label] %>
+          </a>
+        <% end %>
+      </nav>
+    <% end %>
+    <div class="flex flex-1 items-center justify-end gap-2">
+      <%= actions if actions? %>
+    </div>
+  </div>
+</header>

data/app/components/hotwirebits/header_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HeaderComponent < Base
+    renders_one :actions
+
+    def initialize(brand: nil, nav_items: [], sticky: false, **attrs)
+      @brand = brand
+      @nav_items = nav_items
+      @sticky = sticky
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def header_classes
+      merge_classes(
+        "w-full border-b border-hw-border bg-hw-background/95 backdrop-blur supports-[backdrop-filter]:bg-hw-background/60",
+        @sticky ? "sticky top-0 z-50" : nil
+      )
+    end
+  end
+end

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

@@ -0,0 +1,33 @@
+<header class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @breadcrumbs.any? %>
+    <nav aria-label="Breadcrumb" class="mb-4">
+      <ol class="flex items-center space-x-2 text-sm text-hw-muted-foreground">
+        <% @breadcrumbs.each_with_index do |item, idx| %>
+          <% if idx > 0 %>
+            <li class="text-hw-muted-foreground/50">/</li>
+          <% end %>
+          <li>
+            <% if item[:href] && idx < @breadcrumbs.size - 1 %>
+              <a href="<%= item[:href] %>" class="hover:text-hw-foreground transition-colors"><%= item[:label] %></a>
+            <% else %>
+              <span class="font-medium text-hw-foreground"><%= item[:label] %></span>
+            <% end %>
+          </li>
+        <% end %>
+      </ol>
+    </nav>
+  <% end %>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-bold text-hw-foreground"><%= @title %></h1>
+      <% if @subtitle %>
+        <p class="mt-1 text-sm text-hw-muted-foreground"><%= @subtitle %></p>
+      <% end %>
+    </div>
+    <% if actions? %>
+      <div class="flex items-center gap-2 shrink-0">
+        <%= actions %>
+      </div>
+    <% end %>
+  </div>
+</header>

data/app/components/hotwirebits/header_section_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HeaderSectionComponent < Base
+    renders_one :actions
+
+    def initialize(title:, subtitle: nil, breadcrumbs: [], **attrs)
+      @title = title
+      @subtitle = subtitle
+      @breadcrumbs = breadcrumbs
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("pb-6 border-b border-hw-border", @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="<%= inner_classes %>">
+    <div class="flex flex-col gap-4 <%= 'md:max-w-xl' if @variant == :split %>">
+      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-hw-foreground">
+        <%= @title %>
+      </h1>
+      <% if @subtitle %>
+        <p class="text-lg md:text-xl text-hw-muted-foreground max-w-2xl">
+          <%= @subtitle %>
+        </p>
+      <% end %>
+      <% if @primary_cta || @secondary_cta %>
+        <div class="flex flex-wrap gap-3 mt-2 <%= 'justify-center' unless @variant == :split %>">
+          <% if @primary_cta %>
+            <a href="<%= @primary_cta[:href] %>"
+               class="inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-11 px-6 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+              <%= @primary_cta[:label] %>
+            </a>
+          <% end %>
+          <% if @secondary_cta %>
+            <a href="<%= @secondary_cta[:href] %>"
+               class="inline-flex items-center justify-center rounded-lg border border-hw-border bg-hw-background h-11 px-6 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors">
+              <%= @secondary_cta[:label] %>
+            </a>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% if @image_url %>
+      <div class="mt-8 md:mt-0 w-full <%= @variant == :split ? 'md:w-1/2' : 'max-w-3xl' %>">
+        <img src="<%= @image_url %>" alt="" class="rounded-xl shadow-lg w-full object-cover">
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/components/hotwirebits/hero_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HeroComponent < Base
+    VARIANTS = {
+      centered: "text-center items-center",
+      split: "md:text-left items-center md:items-start",
+      with_image: "text-center items-center"
+    }.freeze
+
+    def initialize(title:, subtitle: nil, primary_cta: nil, secondary_cta: nil, image_url: nil, variant: :centered,
+      **attrs)
+      @title = title
+      @subtitle = subtitle
+      @primary_cta = primary_cta
+      @secondary_cta = secondary_cta
+      @image_url = image_url
+      @variant = variant
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "w-full py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def inner_classes
+      merge_classes(
+        "mx-auto max-w-5xl flex flex-col gap-6",
+        VARIANTS[@variant] || VARIANTS[:centered]
+      )
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<span <%= tag.attributes(@extra_attrs) %>><%= highlighted_text %></span>

data/app/components/hotwirebits/highlight_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class HighlightComponent < Base
+    def initialize(text:, query:, **attrs)
+      @text = text
+      @query = query
+      @extra_attrs = attrs
+    end
+
+    def highlighted_text
+      return ERB::Util.html_escape(@text) if @query.blank?
+
+      escaped_text = ERB::Util.html_escape(@text)
+      escaped_query = Regexp.escape(ERB::Util.html_escape(@query))
+
+      escaped_text.gsub(/(#{escaped_query})/i,
+        '<mark class="bg-yellow-200 text-inherit rounded-sm px-0.5">\1</mark>').html_safe
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<div class="<%= container_classes %>" data-controller="hover-3d" data-hover-3d-intensity-value="<%= @intensity %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="rounded-xl border border-hw-border bg-hw-card p-6 shadow-sm transition-transform duration-300 [transform-style:preserve-3d] group-hover:[transform:rotateX(var(--rx))_rotateY(var(--ry))]"
+       data-hover-3d-target="card">
+    <% if body? %>
+      <%= body %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/hover3d_card_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class Hover3dCardComponent < Base
+    renders_one :body
+
+    def initialize(intensity: 10, **attrs)
+      @intensity = intensity
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("group [perspective:1000px]", @extra_attrs.delete(:class))
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<div class="relative inline-block"
+     data-controller="hw-hover-card"
+     data-action="mouseenter->hw-hover-card#show mouseleave->hw-hover-card#hide">
+  <div data-hw-hover-card-target="trigger">
+    <% if trigger? %>
+      <%= trigger %>
+    <% else %>
+      <a href="#" class="text-sm font-medium underline-offset-4 hover:underline">Hover</a>
+    <% end %>
+  </div>
+  <div class="<%= card_classes %>"
+       data-hw-hover-card-target="content"
+       data-state="closed"
+       data-side="bottom"
+       hidden
+       <%= tag.attributes(@extra_attrs) %>>
+    <%= content %>
+  </div>
+</div>