hotwirebits 0.1.0

data/app/components/hotwirebits/time_picker_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TimePickerComponent < Base
+    FORMATS = %i[twelve twenty_four].freeze
+
+    def initialize(name: nil, value: nil, time_format: :twenty_four, step: 1, disabled: false, **attrs)
+      @name = name
+      @value = value
+      @time_format = time_format
+      @step = step
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    def twelve_hour?
+      @time_format == :twelve
+    end
+
+    def input_classes
+      merge_classes(
+        "h-9 w-full rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground",
+        "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"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="border-l-2 border-hw-border ml-3">
+    <% @items.each do |item| %>
+      <div class="relative pl-8 pb-8 last:pb-0">
+        <div class="absolute -left-[9px] top-0.5 h-4 w-4 rounded-full border-2 border-hw-border bg-hw-background flex items-center justify-center">
+          <% if item[:icon] %>
+            <span class="text-[10px] text-hw-muted-foreground"><%= item[:icon] %></span>
+          <% end %>
+        </div>
+        <div class="pt-0.5">
+          <div class="flex items-center gap-2">
+            <p class="text-sm font-medium text-hw-foreground"><%= item[:title] %></p>
+            <% if item[:time] %>
+              <span class="text-xs text-hw-muted-foreground"><%= item[:time] %></span>
+            <% end %>
+          </div>
+          <% if item[:description] %>
+            <p class="mt-1 text-sm text-hw-muted-foreground"><%= item[:description] %></p>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/timeline_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TimelineComponent < Base
+    def initialize(items: [], **attrs)
+      @items = items
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "relative",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<div data-controller="hw-toast"
+     data-hw-toast-duration-value="<%= @duration %>"
+     class="group pointer-events-auto">
+  <div class="<%= toast_classes %>" <%= tag.attributes(@extra_attrs) %>>
+    <div class="flex items-start gap-3">
+      <svg class="h-5 w-5 shrink-0 <%= type_config[:icon] %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <%= safe_svg(icon_svg) %>
+      </svg>
+      <div class="grid gap-1">
+        <% if @title %>
+          <div class="text-sm font-semibold"><%= @title %></div>
+        <% end %>
+        <% if @description %>
+          <div class="text-sm opacity-90 text-hw-muted-foreground"><%= @description %></div>
+        <% end %>
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <% if @action %>
+        <a href="<%= @action[:url] %>"
+           class="inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-hw-border bg-transparent px-3 text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-secondary focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2">
+          <%= @action[:label] %>
+        </a>
+      <% end %>
+      <button type="button"
+              class="absolute right-1 top-1 rounded-md p-1 text-hw-foreground/50 opacity-0 transition-opacity hover:text-hw-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+              data-action="click->hw-toast#dismiss">
+        <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>
+  </div>
+</div>

data/app/components/hotwirebits/toast_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ToastComponent < Base
+    TYPES = {
+      success: {bg: "border-hw-success/30", icon: "text-hw-success", default_title: "Success"},
+      error: {bg: "border-hw-destructive/30", icon: "text-hw-destructive", default_title: "Error"},
+      warning: {bg: "border-hw-warning/30", icon: "text-hw-warning", default_title: "Warning"},
+      info: {bg: "border-hw-info/30", icon: "text-hw-info", default_title: "Info"}
+    }.freeze
+
+    ICONS = {
+      success: '<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>',
+      error: '<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>',
+      warning: '<path stroke-linecap="round" stroke-linejoin="round" d="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"/>',
+      info: '<path stroke-linecap="round" stroke-linejoin="round" d="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"/>'
+    }.freeze
+
+    def initialize(title: nil, description: nil, type: :info, duration: 5000, action: nil, **attrs)
+      @title = title
+      @description = description
+      @type = type
+      @duration = duration
+      @action = action
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def type_config
+      TYPES[@type] || TYPES[:info]
+    end
+
+    def icon_svg
+      ICONS[@type] || ICONS[:info]
+    end
+
+    def toast_classes
+      merge_classes(
+        "pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all",
+        type_config[:bg],
+        "bg-hw-background",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+<button type="button" aria-pressed="<%= @pressed %>" <%= 'disabled' if @disabled %> class="<%= button_classes %>" data-controller="hw-toggle-button" data-action="click->hw-toggle-button#toggle" <%= tag.attributes(@extra_attrs) %>>
+  <% if @icon %><span class="h-4 w-4"><%= safe_svg(@icon) %></span><% end %>
+  <% if @label %><span><%= @label %></span><% end %>
+</button>

data/app/components/hotwirebits/toggle_button_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ToggleButtonComponent < Base
+    def initialize(pressed: false, label: nil, icon: nil, disabled: false, **attrs)
+      @pressed = pressed
+      @label = label
+      @icon = icon
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def button_classes
+      merge_classes(
+        "inline-flex items-center gap-2 rounded-md px-3 py-2 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 cursor-pointer",
+        @pressed ? "bg-hw-accent text-hw-accent-foreground" : "bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground"
+      )
+    end
+
+    def icon_element
+      return unless @icon
+
+      tag.span(class: "h-4 w-4") { safe_svg(@icon) }
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<div class="<%= group_classes %>" data-controller="hw-toggle-group" role="group" aria-label="Toggle options" <%= tag.attributes(@extra_attrs) %>>
+  <% @options.each_with_index do |opt, i| %>
+    <% pressed = @selected.include?(opt[:value]) %>
+    <button type="button" aria-pressed="<%= pressed %>" <%= 'disabled' if @disabled || opt[:disabled] %> class="<%= option_classes(pressed, i == @options.size - 1, i == 0) %>" data-action="click->hw-toggle-group#select" data-value="<%= opt[:value] %>">
+      <span><%= opt[:label] %></span>
+    </button>
+  <% end %>
+</div>

data/app/components/hotwirebits/toggle_button_group_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ToggleButtonGroupComponent < Base
+    def initialize(options: [], selected: nil, multiple: false, name: nil, disabled: false, **attrs)
+      @options = options
+      @selected = Array(selected)
+      @multiple = multiple
+      @name = name
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def group_classes
+      merge_classes("inline-flex rounded-md border border-hw-input bg-hw-background")
+    end
+
+    def option_element(opt)
+      pressed = @selected.include?(opt[:value])
+      tag.button(
+        type: "button",
+        aria: {pressed: pressed},
+        disabled: @disabled || opt[:disabled],
+        class: option_classes(pressed, opt == @options.last, opt == @options.first),
+        data: {action: "click->hw-toggle-group#select", value: opt[:value]}
+      ) do
+        tag.span(opt[:label])
+      end
+    end
+
+    def option_classes(pressed, last, first)
+      radius = if first && last
+        "rounded-md"
+      elsif first
+        "rounded-l-md"
+      elsif last
+        "rounded-r-md"
+      else
+        ""
+      end
+
+      merge_classes(
+        "px-3 py-1.5 text-sm font-medium transition-colors cursor-pointer",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-1",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "border-r border-hw-input last:border-r-0",
+        radius,
+        pressed ? "bg-hw-accent text-hw-accent-foreground" : "bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<button type="button" aria-pressed="<%= @pressed %>" <%= 'disabled' if @disabled %> class="inline-flex items-center justify-center rounded-md 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 hover:bg-hw-accent hover:text-hw-accent-foreground <%= @pressed ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent' %> cursor-pointer h-9 px-3 text-sm" <%= tag.attributes(@extra_attrs) %>>
+  <%= content || @label %>
+</button>

data/app/components/hotwirebits/toggle_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ToggleComponent < Base
+    VARIANTS = {
+      default: "bg-transparent hover:bg-hw-accent hover:text-hw-accent-foreground",
+      outline: "border border-hw-input bg-transparent hover:bg-hw-accent hover:text-hw-accent-foreground"
+    }.freeze
+
+    SIZES = {
+      sm: "h-8 px-2 text-xs",
+      md: "h-9 px-3 text-sm",
+      lg: "h-10 px-4"
+    }.freeze
+
+    def initialize(label: nil, variant: :default, size: :md, pressed: false, disabled: false, **attrs)
+      @label = label
+      @variant = variant
+      @size = size
+      @pressed = pressed
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def toggle_classes
+      merge_classes(
+        "inline-flex items-center justify-center rounded-md 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",
+        "data-[state=on]:bg-hw-accent data-[state=on]:text-hw-accent-foreground cursor-pointer",
+        VARIANTS[@variant] || VARIANTS[:default],
+        SIZES[@size] || SIZES[:md]
+      )
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<div class="inline-flex items-center rounded-md border border-hw-input bg-hw-background p-1 gap-0.5" role="toolbar" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each_with_index do |item, idx| %>
+    <% if @with_separator && idx > 0 %>
+      <div class="mx-1 h-4 w-px bg-hw-border" role="separator"></div>
+    <% end %>
+    <% if item[:href] %>
+      <a href="<%= item[:href] %>" class="inline-flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring" title="<%= item[:label] %>">
+        <% if item[:icon] %><span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span><% end %>
+        <% if item[:label] %><span class="text-sm"><%= item[:label] %></span><% end %>
+      </a>
+    <% else %>
+      <button type="button" class="inline-flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring" title="<%= item[:label] %>">
+        <% if item[:icon] %><span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span><% end %>
+        <% if item[:label] %><span class="text-sm"><%= item[:label] %></span><% end %>
+      </button>
+    <% end %>
+  <% end %>
+</div>

data/app/components/hotwirebits/toolbar_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ToolbarComponent < Base
+    def initialize(items: [], with_separator: false, **attrs)
+      @items = items
+      @with_separator = with_separator
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def toolbar_classes
+      merge_classes(
+        "inline-flex items-center rounded-md border border-hw-input bg-hw-background p-1 gap-0.5"
+      )
+    end
+
+    def item_element(item, index)
+      content = safe_join([
+        (tag.span(class: "h-4 w-4 shrink-0") { safe_svg(item[:icon]) } if item[:icon]),
+        (tag.span(item[:label], class: "text-sm") if item[:label])
+      ].compact)
+
+      inner = if item[:href]
+        tag.a(href: item[:href], class: item_classes, title: item[:label]) { content }
+      else
+        tag.button(type: "button", class: item_classes, title: item[:label]) { content }
+      end
+
+      if @with_separator && index > 0
+        safe_join([separator_element, inner])
+      else
+        inner
+      end
+    end
+
+    def item_classes
+      merge_classes(
+        "inline-flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm text-hw-muted-foreground",
+        "hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring"
+      )
+    end
+
+    def separator_element
+      tag.div(class: "mx-1 h-4 w-px bg-hw-border", role: "separator")
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<div class="relative inline-block"
+     data-controller="hw-tooltip"
+     data-hw-tooltip-delay-value="<%= @delay %>"
+     data-action="mouseenter->hw-tooltip#show mouseleave->hw-tooltip#hide focus->hw-tooltip#show blur->hw-tooltip#hide">
+  <div data-hw-tooltip-target="trigger">
+    <%= content %>
+  </div>
+  <div class="<%= tooltip_classes %>"
+       data-hw-tooltip-target="content"
+       role="tooltip"
+       data-side="<%= @side %>"
+       hidden
+       <%= tag.attributes(@extra_attrs) %>>
+    <%= @tip %>
+  </div>
+</div>

data/app/components/hotwirebits/tooltip_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TooltipComponent < Base
+    def initialize(tip: nil, side: :top, delay: 200, **attrs)
+      @tip = tip
+      @side = side
+      @delay = delay
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def tooltip_classes
+      merge_classes(
+        "absolute z-50 overflow-hidden rounded-md border border-hw-border bg-hw-popover px-3 py-1.5 text-sm text-hw-popover-foreground shadow-md",
+        "animate-in fade-in-0 zoom-in-95",
+        side_classes,
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def side_classes
+      case @side
+      when :top then "bottom-full left-1/2 -translate-x-1/2 mb-2"
+      when :bottom then "top-full left-1/2 -translate-x-1/2 mt-2"
+      when :left then "right-full top-1/2 -translate-y-1/2 mr-2"
+      when :right then "left-full top-1/2 -translate-y-1/2 ml-2"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <ul class="list-none p-0 m-0" data-controller="hw-tree">
+    <% @items.each do |item| %>
+      <%= render_node(item) %>
+    <% end %>
+  </ul>
+</div>

data/app/components/hotwirebits/tree_view_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TreeViewComponent < Base
+    def initialize(items: [], **attrs)
+      @items = items
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "space-y-0.5",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def icon_for(item)
+      return unless item[:children]&.any?
+
+      item.fetch(:expanded, true) ? "▾" : "▸"
+    end
+
+    def render_node(item)
+      has_children = item[:children]&.any?
+      label = ERB::Util.html_escape(item[:label].to_s)
+      icon_html = item[:icon] ? "<span class=\"h-4 w-4 shrink-0 text-hw-muted-foreground\">#{ERB::Util.html_escape(item[:icon].to_s)}</span>" : ""
+      chevron = has_children ? "<span class=\"text-hw-muted-foreground\">#{icon_for(item)}</span>" : ""
+      children_html = (has_children && item.fetch(:expanded, true)) ? render_children(item[:children]) : ""
+      <<~HTML.html_safe
+        <li class="list-none">
+          <div class="flex items-center gap-1.5 px-2 py-1 rounded-md hover:bg-hw-muted cursor-pointer text-sm"
+               data-action="click->hw-tree#toggle">
+            #{chevron}
+            #{icon_html}
+            <span>#{label}</span>
+          </div>
+          #{children_html}
+        </li>
+      HTML
+    end
+
+    def render_children(children)
+      items = children.map { |child| render_node(child) }.join
+      "<ul class=\"list-none pl-4\" data-hw-tree-target=\"content\">#{items}</ul>"
+    end
+  end
+end

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

@@ -0,0 +1,26 @@
+<div data-controller="hw-two-factor"
+     data-hw-two-factor-length-value="<%= @length %>"
+     data-hw-two-factor-auto-submit-value="<%= @auto_submit %>"
+     class="space-y-4"
+     <%= tag.attributes(@extra_attrs) %>>
+  <input type="hidden" name="<%= @name %>" value="" data-hw-two-factor-target="hidden">
+  <div class="flex items-center justify-center gap-2">
+    <% @length.times do |i| %>
+      <input type="text"
+             maxlength="1"
+             inputmode="numeric"
+             autocomplete="one-time-code"
+             class="h-12 w-12 text-center text-lg font-semibold rounded-md border border-hw-input bg-hw-background text-hw-foreground ring-offset-hw-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2"
+             data-action="input->hw-two-factor#input keydown->hw-two-factor#keydown paste->hw-two-factor#paste"
+      data-index="<%= i %>">
+    <% end %>
+  </div>
+  <% if @with_timer %>
+    <div class="text-center text-sm text-hw-muted-foreground">
+      <span data-hw-two-factor-target="timer"></span>
+      <% if @resend_url %>
+        <a href="<%= @resend_url %>" class="text-hw-primary hover:underline hidden" data-hw-two-factor-target="resend">Resend code</a>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/two_factor_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TwoFactorComponent < Base
+    def initialize(name: nil, length: 6, auto_submit: false, with_timer: false, resend_url: nil, **attrs)
+      @name = name
+      @length = length
+      @auto_submit = auto_submit
+      @with_timer = with_timer
+      @resend_url = resend_url
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<div class="flex items-center <%= gap_class %>" <%= tag.attributes(@extra_attrs) %>>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 0ms;"></span>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 150ms;"></span>
+  <span class="<%= dot_size %> <%= dot_color %> rounded-full animate-bounce" style="animation-delay: 300ms;"></span>
+</div>

data/app/components/hotwirebits/typing_indicator_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TypingIndicatorComponent < Base
+    SIZES = {
+      sm: "h-1.5 w-1.5",
+      md: "h-2 w-2",
+      lg: "h-2.5 w-2.5"
+    }.freeze
+
+    def initialize(size: :md, color: nil, **attrs)
+      @size = size
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    def dot_size
+      SIZES[@size] || SIZES[:md]
+    end
+
+    def dot_color
+      @color || "bg-hw-muted-foreground"
+    end
+
+    def gap_class
+      case @size
+      when :sm then "gap-1"
+      when :lg then "gap-1.5"
+      else "gap-1"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<% tag_name = self.class::TAG_MAP[(@as || :p).to_sym] || :p %>
+<% style_key = (@as || :p).to_sym %>
+<%= tag.public_send(tag_name, content, class: self.class::STYLES[style_key] || self.class::STYLES[:p], **@extra_attrs) %>

data/app/components/hotwirebits/typography_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TypographyComponent < Base
+    STYLES = {
+      h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+      h2: "scroll-m-20 border-b border-hw-border pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+      h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+      h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+      h5: "scroll-m-20 text-lg font-semibold tracking-tight",
+      h6: "scroll-m-20 text-base font-semibold tracking-tight",
+      p: "leading-7 [&:not(:first-child)]:mt-6",
+      lead: "text-xl text-hw-muted-foreground",
+      large: "text-lg font-semibold",
+      small: "text-sm font-medium leading-none",
+      muted: "text-sm text-hw-muted-foreground",
+      blockquote: "mt-6 border-l-2 border-hw-border pl-6 italic",
+      code: "relative rounded bg-hw-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      list: "my-6 ml-6 list-disc [&>li]:mt-2",
+      inline_code: "relative rounded bg-hw-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+      mark: "bg-hw-warning/20 dark:bg-hw-warning/30 px-0.5 rounded"
+    }.freeze
+
+    TAG_MAP = {
+      h1: :h1, h2: :h2, h3: :h3, h4: :h4, h5: :h5, h6: :h6,
+      p: :p, lead: :p, large: :div, small: :small, muted: :p,
+      blockquote: :blockquote, code: :code, list: :ul, inline_code: :code, mark: :mark
+    }.freeze
+
+    def initialize(as: nil, **attrs)
+      @as = as
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div data-controller="hw-validator"
+     data-hw-validator-field-value="<%= @field %>"
+     data-hw-validator-rules-value="<%= @rules.to_json %>"
+     data-hw-validator-message-value="<%= @message %>"
+     class="space-y-1"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div data-hw-validator-target="errors" class="text-xs text-hw-destructive hidden"></div>
+  <% if @rules.any? %>
+    <ul class="space-y-0.5">
+      <% @rules.each do |rule| %>
+        <li class="flex items-center gap-1.5 text-xs text-hw-muted-foreground" data-rule="<%= rule.is_a?(Hash) ? rule.keys.first : rule %>">
+          <svg class="h-3 w-3" data-hw-validator-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"/>
+          </svg>
+          <span><%= rule.is_a?(Hash) ? rule.values.first : rule.to_s.humanize %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+</div>

data/app/components/hotwirebits/validator_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ValidatorComponent < Base
+    def initialize(field:, rules: [], message: nil, **attrs)
+      @field = field
+      @rules = rules
+      @message = message
+      @extra_attrs = attrs
+    end
+  end
+end