hotwirebits 0.1.0

data/app/components/hotwirebits/spoiler_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SpoilerComponent < Base
+    def initialize(max_height: 100, show_more_label: "Show more", show_less_label: "Show less", **attrs)
+      @max_height = max_height
+      @show_more_label = show_more_label
+      @show_less_label = show_less_label
+      @extra_attrs = attrs
+    end
+  end
+end

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

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

data/app/components/hotwirebits/stack_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StackComponent < Base
+    GAPS = {
+      "0" => "gap-0", "1" => "gap-1", "2" => "gap-2", "3" => "gap-3",
+      "4" => "gap-4", "6" => "gap-6", "8" => "gap-8"
+    }.freeze
+    ALIGNS = {
+      start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch"
+    }.freeze
+
+    def initialize(gap: "4", align: :stretch, **attrs)
+      @gap = gap.to_s
+      @align = align
+      @extra_attrs = attrs
+    end
+
+    def stack_classes
+      merge_classes(
+        "flex flex-col",
+        GAPS[@gap],
+        ALIGNS[@align],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<ul class="<%= container_classes %>" role="list" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <li class="flex items-center gap-4 px-4 py-3">
+      <% if item[:avatar] %>
+        <img src="<%= item[:avatar] %>" alt="" class="h-10 w-10 shrink-0 rounded-full object-cover">
+      <% end %>
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+        <% if item[:subtitle] %>
+          <p class="truncate text-sm text-hw-muted-foreground"><%= item[:subtitle] %></p>
+        <% end %>
+      </div>
+      <% if item[:action] %>
+        <div class="shrink-0">
+          <%= item[:action] %>
+        </div>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

data/app/components/hotwirebits/stacked_list_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StackedListComponent < Base
+    def initialize(items: [], divided: true, **attrs)
+      @items = items
+      @divided = divided
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        @divided ? "divide-y divide-hw-border border-y border-hw-border" : "space-y-2",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between">
+    <p class="text-sm font-medium text-hw-muted-foreground"><%= @title %></p>
+    <% if @icon %>
+      <span class="text-hw-muted-foreground"><%= @icon %></span>
+    <% end %>
+  </div>
+  <div class="mt-2">
+    <p class="text-2xl font-bold"><%= @value %></p>
+    <div class="flex items-center gap-2 mt-1">
+      <% if @trend_value %>
+        <span class="text-sm font-medium <%= trend_color %>">
+          <%= @trend_up ? '↑' : '↓' %> <%= @trend_value %>
+        </span>
+      <% end %>
+      <% if @description %>
+        <span class="text-sm text-hw-muted-foreground"><%= @description %></span>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/stat_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StatComponent < Base
+    def initialize(title:, value:, description: nil, trend_up: nil, trend_value: nil, icon: nil, **attrs)
+      @title = title
+      @value = value
+      @description = description
+      @trend_up = trend_up
+      @trend_value = trend_value
+      @icon = icon
+      @extra_attrs = attrs
+    end
+
+    def trend_color
+      @trend_up ? "text-hw-success" : "text-hw-destructive"
+    end
+
+    def container_classes
+      merge_classes(
+        "rounded-lg border border-hw-border bg-hw-card p-4 shadow-sm",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @stats %>
+    <% @stats.each do |stat| %>
+      <div class="rounded-lg border border-hw-border bg-hw-card p-6">
+        <p class="text-sm font-medium text-hw-muted-foreground"><%= stat[:label] %></p>
+        <p class="mt-2 text-3xl font-bold text-hw-foreground"><%= stat[:value] %></p>
+        <% if stat[:change] %>
+          <p class="mt-1 text-sm text-hw-muted-foreground"><%= stat[:change] %></p>
+        <% end %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+</div>

data/app/components/hotwirebits/stats_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StatsComponent < Base
+    def initialize(columns: nil, stats: nil, **attrs)
+      @stats = stats
+      @columns = columns || stats&.size
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      grid_cols = case @columns
+      when 2 then "sm:grid-cols-2"
+      when 3 then "sm:grid-cols-2 lg:grid-cols-3"
+      when 4 then "sm:grid-cols-2 lg:grid-cols-4"
+      else "sm:grid-cols-2 lg:grid-cols-4"
+      end
+
+      merge_classes(
+        "grid gap-4 #{grid_cols}",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div class="flex items-center justify-between px-4 py-1.5 bg-hw-muted/80 border-hw-border text-xs text-hw-muted-foreground <%= position_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <div class="flex items-center gap-1.5">
+      <% if item[:icon] %>
+        <span class="h-3.5 w-3.5"><%= safe_svg(item[:icon]) %></span>
+      <% end %>
+      <span><%= item[:label] %></span>
+      <% if item[:value] %>
+        <span class="font-medium text-hw-foreground"><%= item[:value] %></span>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/status_bar_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StatusBarComponent < Base
+    POSITIONS = %i[top bottom].freeze
+
+    def initialize(items: [], position: :bottom, **attrs)
+      @items = items
+      @position = POSITIONS.include?(position) ? position : :bottom
+      @extra_attrs = attrs
+    end
+
+    def position_classes
+      case @position
+      when :top then "top-0 border-b"
+      else "bottom-0 border-t"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,6 @@
+<span class="inline-flex items-center gap-1.5" <%= tag.attributes(@extra_attrs) %>>
+  <span class="rounded-full <%= COLORS[@status] || 'bg-hw-muted-foreground/60' %> <%= SIZES[@size] || 'h-2.5 w-2.5' %>"></span>
+<% if @label %>
+  <span class="text-sm text-hw-muted-foreground"><%= @label %></span>
+<% end %>
+</span>

data/app/components/hotwirebits/status_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StatusComponent < Base
+    COLORS = {
+      online: "bg-hw-success",
+      offline: "bg-hw-muted-foreground/60",
+      busy: "bg-hw-destructive",
+      away: "bg-hw-warning",
+      error: "bg-hw-destructive",
+      success: "bg-hw-success",
+      warning: "bg-hw-warning",
+      info: "bg-hw-info"
+    }.freeze
+
+    SIZES = {
+      xs: "h-1.5 w-1.5",
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    }.freeze
+
+    def initialize(status: :online, size: :md, label: nil, **attrs)
+      @status = status
+      @size = size
+      @label = label
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<span class="relative inline-flex items-center gap-2" <%= tag.attributes(@extra_attrs) %>>
+  <span class="relative inline-flex">
+    <span class="<%= dot_classes %>"></span>
+    <% if @with_pulse %>
+      <span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 <%= STATUSES[@status] || 'bg-hw-success' %>"></span>
+    <% end %>
+  </span>
+  <% if @label %>
+    <span class="text-sm"><%= @label %></span>
+  <% end %>
+</span>

data/app/components/hotwirebits/status_dot_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StatusDotComponent < Base
+    STATUSES = {
+      online: "bg-hw-success",
+      offline: "bg-hw-muted-foreground/40",
+      busy: "bg-hw-destructive",
+      away: "bg-hw-warning"
+    }.freeze
+
+    SIZES = {
+      sm: "h-1.5 w-1.5",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    }.freeze
+
+    def initialize(status: :online, size: :md, with_pulse: false, label: nil, **attrs)
+      @status = status
+      @size = size
+      @with_pulse = with_pulse
+      @label = label
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def dot_classes
+      merge_classes(
+        "inline-block rounded-full",
+        STATUSES[@status] || STATUSES[:online],
+        SIZES[@size] || SIZES[:md],
+        @with_pulse ? "animate-pulse" : nil
+      )
+    end
+  end
+end

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

@@ -0,0 +1,55 @@
+<div data-controller="hw-stepper-form"
+     data-hw-stepper-form-current-step-value="<%= @current_step %>"
+     data-hw-stepper-form-total-steps-value="<%= total_steps %>"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between mb-8">
+    <% @steps.each_with_index do |step, idx| %>
+      <% state = step_state(idx) %>
+      <div class="flex items-center<%= ' flex-1' unless idx == @steps.size - 1 %>">
+        <div class="flex items-center gap-3">
+          <div class="<%= merge_classes('flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors',
+            state == :completed ? 'bg-hw-primary text-hw-primary-foreground' : state == :current ? 'border-2 border-hw-primary text-hw-primary' : 'border-2 border-hw-border text-hw-muted-foreground') %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </div>
+          <span class="text-sm font-medium <%= state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground' %>"><%= step[:label] %></span>
+        </div>
+        <% unless idx == @steps.size - 1 %>
+          <div class="flex-1 mx-4 h-0.5 <%= idx < @current_step ? 'bg-hw-primary' : 'bg-hw-border' %>"></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="min-h-[200px]">
+    <% @steps.each_with_index do |step, idx| %>
+      <div data-hw-stepper-form-target="stepPanel"
+           class="<%= idx == @current_step ? '' : 'hidden' %>">
+        <%= step[:content] %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-center justify-between mt-6 pt-6 border-t border-hw-border">
+    <button type="button"
+            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 cursor-pointer disabled:pointer-events-none disabled:opacity-50"
+            data-hw-stepper-form-target="prevBtn"
+            data-action="click->hw-stepper-form#prev"
+      <%= @current_step == 0 ? 'disabled' : '' %>>
+      Previous
+    </button>
+    <% if @current_step == total_steps - 1 %>
+      <button type="submit"
+              class="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">
+        <%= @submit_label %>
+      </button>
+    <% else %>
+      <button type="button"
+              class="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"
+              data-action="click->hw-stepper-form#next">
+        Next
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/stepper_form_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StepperFormComponent < Base
+    def initialize(steps: [], current_step: 0, submit_label: "Submit", **attrs)
+      @steps = steps
+      @current_step = current_step.to_i
+      @submit_label = submit_label
+      @extra_attrs = attrs
+    end
+
+    def total_steps
+      @steps.size
+    end
+
+    def step_state(idx)
+      if idx < @current_step then :completed
+      elsif idx == @current_step then :current
+      else :pending
+      end
+    end
+  end
+end

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

@@ -0,0 +1,45 @@
+<div class="<%= container_classes %>" data-controller="hw-steps" <%= tag.attributes(@extra_attrs) %>>
+  <% @steps.each_with_index do |step, idx| %>
+    <% state = step_state(idx) %>
+    <div class="flex flex-col items-center">
+      <div class="flex items-center">
+        <% if @clickable && step[:href] %>
+          <a href="<%= step[:href] %>" class="<%= step_circle_classes(state) %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </a>
+        <% else %>
+          <div class="<%= step_circle_classes(state) %>">
+            <% if state == :completed %>
+              <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="M5 13l4 4L19 7"/></svg>
+            <% else %>
+              <%= idx + 1 %>
+            <% end %>
+          </div>
+        <% end %>
+        <% if @orientation == :vertical %>
+          <div class="ml-3">
+            <p class="<%= merge_classes('text-sm font-medium', state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground') %>"><%= step[:label] %></p>
+            <% if step[:description] %>
+              <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= step[:description] %></p>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+      <% if @orientation == :horizontal %>
+        <div class="mt-2 text-center">
+          <p class="<%= merge_classes('text-sm font-medium', state == :pending ? 'text-hw-muted-foreground' : 'text-hw-foreground') %>"><%= step[:label] %></p>
+          <% if step[:description] %>
+            <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= step[:description] %></p>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+    <% unless idx == @steps.size - 1 %>
+      <div class="<%= connector_classes(idx) %>"></div>
+    <% end %>
+  <% end %>
+</div>

data/app/components/hotwirebits/steps_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class StepsComponent < Base
+    def initialize(steps: [], current_step: nil, current: nil, orientation: :horizontal, clickable: false, **attrs)
+      @steps = steps
+      @current_step = (current || current_step || 0).to_i
+      @orientation = orientation
+      @clickable = clickable
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def container_classes
+      merge_classes(
+        (@orientation == :horizontal) ? "flex items-start" : "flex flex-col",
+        (@orientation == :horizontal) ? "w-full" : nil
+      )
+    end
+
+    def step_state(idx)
+      if idx < @current_step then :completed
+      elsif idx == @current_step then :current
+      else :pending
+      end
+    end
+
+    def step_circle_classes(state)
+      base = "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors"
+      case state
+      when :completed then merge_classes(base, "bg-hw-primary text-hw-primary-foreground")
+      when :current then merge_classes(base, "border-2 border-hw-primary text-hw-primary")
+      else merge_classes(base, "border-2 border-hw-border text-hw-muted-foreground")
+      end
+    end
+
+    def connector_classes(idx)
+      completed = idx < @current_step
+      base = (@orientation == :horizontal) ? "mt-4 h-0.5 flex-1 min-w-8" : "ml-4 w-0.5 min-h-6"
+      merge_classes(base, completed ? "bg-hw-primary" : "bg-hw-border")
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<label class="swap inline-flex items-center cursor-pointer <%= effect_class %>"
+       data-controller="hw-swap"
+       data-hw-swap-active-value="<%= on? %>"
+       <%= tag.attributes(@extra_attrs) %>>
+  <input type="checkbox" data-action="change->hw-swap#toggle" class="sr-only" <%= 'checked' if on? %> />
+  <div class="swap-on" data-hw-swap-target="onContent">
+    <% if @on_content %>
+      <%= safe_svg(@on_content) %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+  <div class="swap-off" data-hw-swap-target="offContent">
+    <% if @off_content %>
+      <%= safe_svg(@off_content) %>
+    <% end %>
+  </div>
+</label>

data/app/components/hotwirebits/swap_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SwapComponent < Base
+    EFFECTS = {
+      rotate: "swap-rotate",
+      flip: "swap-flip",
+      fade: "swap-fade"
+    }.freeze
+
+    def initialize(on_content: nil, off_content: nil, active: :on, effect: :fade, **attrs)
+      @on_content = on_content
+      @off_content = off_content
+      @active = active
+      @effect = effect
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def effect_class
+      EFFECTS[@effect] || EFFECTS[:fade]
+    end
+
+    def on?
+      @active == :on
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<label class="flex items-center gap-2 cursor-pointer" data-controller="hw-switch" <%= tag.attributes(@extra_attrs) %>>
+  <input type="hidden" name="<%= @name %>" value="0">
+  <button type="button" role="switch" aria-checked="<%= @checked %>" <%= 'disabled' if @disabled %> class="peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 focus-visible:ring-offset-hw-background disabled:cursor-not-allowed disabled:opacity-50 bg-hw-input <%= @checked ? 'bg-hw-primary' : '' %> h-6 w-11" data-action="click->hw-switch#toggle">
+    <span class="pointer-events-none block h-5 w-5 rounded-full bg-hw-background shadow-lg ring-0 transition-transform <%= @checked ? 'translate-x-5' : 'translate-x-0' %>"></span>
+  </button>
+  <% if @label %>
+    <span class="text-sm font-medium"><%= @label %></span>
+  <% end %>
+</label>

data/app/components/hotwirebits/switch_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class SwitchComponent < Base
+    SIZES = {
+      sm: {track: "h-5 w-9", thumb: "h-4 w-4", translate: "peer-checked:translate-x-4"},
+      md: {track: "h-6 w-11", thumb: "h-5 w-5", translate: "peer-checked:translate-x-5"},
+      lg: {track: "h-7 w-[52px]", thumb: "h-6 w-6", translate: "peer-checked:translate-x-6"}
+    }.freeze
+
+    def initialize(name: nil, checked: false, disabled: false, label: nil, size: :md, **attrs)
+      @name = name
+      @checked = checked
+      @disabled = disabled
+      @label = label
+      @size = size
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def hidden_input
+      tag.input(type: "hidden", name: @name, value: "0")
+    end
+
+    def track
+      size_config = SIZES[@size] || SIZES[:md]
+      tag.button(
+        type: "button",
+        role: "switch",
+        aria: {checked: @checked},
+        disabled: @disabled,
+        class: merge_classes(
+          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+          "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring",
+          "focus-visible:ring-offset-2 focus-visible:ring-offset-hw-background disabled:cursor-not-allowed disabled:opacity-50",
+          "bg-hw-input data-[checked]:bg-hw-primary",
+          size_config[:track]
+        ),
+        data: {action: "click->hw-switch#toggle", checked: @checked || nil},
+        **@extra_attrs
+      ) do
+        tag.span(class: merge_classes(
+          "pointer-events-none block rounded-full bg-hw-background shadow-lg ring-0 transition-transform",
+          "translate-x-0 data-[checked]:translate-x-5",
+          size_config[:thumb]
+        ), data: {rb_switch_target: "thumb"})
+      end
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="relative w-full overflow-auto">
+  <table class="<%= table_classes %>" <%= tag.attributes(@extra_attrs) %>>
+    <%= content %>
+  </table>
+</div>

data/app/components/hotwirebits/table_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TableComponent < Base
+    def initialize(striped: false, bordered: false, hoverable: false, **attrs)
+      @striped = striped
+      @bordered = bordered
+      @hoverable = hoverable
+      @extra_attrs = attrs
+    end
+
+    def table_classes
+      merge_classes(
+        "w-full text-sm",
+        @bordered ? "border border-hw-border" : "",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def row_classes(index)
+      merge_classes(
+        (@striped && index.odd?) ? "bg-hw-muted/50" : "",
+        @hoverable ? "hover:bg-hw-muted/80 transition-colors" : ""
+      )
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+<nav aria-label="Table of contents" class="space-y-0.5 text-sm" <%= tag.attributes(@extra_attrs) %>>
+  <% @headings.each do |heading| %>
+    <a href="#<%= heading[:id] %>"
+       class="<%= merge_classes(
+         'block py-1 text-hw-muted-foreground hover:text-hw-foreground transition-colors',
+         indent_class(heading[:level]),
+         @active_id == heading[:id] ? 'text-hw-foreground font-medium border-l-2 border-hw-primary pl-2' : nil
+       ) %>">
+  <%= heading[:text] %>
+</a>
+<% end %>
+</nav>

data/app/components/hotwirebits/table_of_contents_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TableOfContentsComponent < Base
+    def initialize(headings: [], active_id: nil, **attrs)
+      @headings = headings
+      @active_id = active_id
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def indent_class(level)
+      case level.to_i
+      when 2 then "pl-0"
+      when 3 then "pl-3"
+      when 4 then "pl-6"
+      when 5 then "pl-9"
+      else "pl-0"
+      end
+    end
+  end
+end