hotwirebits 0.1.0

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

@@ -0,0 +1,43 @@
+<div class="<%= container_classes %>" data-controller="hw-tabs" data-hw-tabs-active-value="<%= @active_tab %>" <%= tag.attributes(@extra_attrs) %>>
+  <div role="tablist" class="<%= list_classes %>">
+    <% @tabs.each do |tab| %>
+      <button type="button"
+              role="tab"
+              id="tab-<%= tab[:id] %>"
+              data-hw-tabs-target="tab"
+              data-action="click->hw-tabs#select"
+        data-tab-id="<%= tab[:id] %>"
+        aria-controls="panel-<%= tab[:id] %>"
+        aria-selected="<%= tab[:id] == @active_tab %>"
+        class="<%= tab_classes(tab[:id] == @active_tab) %>">
+        <% if tab[:icon] %>
+          <span class="h-4 w-4"><%= safe_svg(tab[:icon]) %></span>
+        <% end %>
+        <%= tab[:label] %>
+      </button>
+    <% end %>
+  </div>
+  <% @tabs.each do |tab| %>
+    <div role="tabpanel"
+         id="panel-<%= tab[:id] %>"
+         data-hw-tabs-target="panel"
+         data-tab-id="<%= tab[:id] %>"
+         aria-labelledby="tab-<%= tab[:id] %>"
+         class="<%= tab[:id] == @active_tab ? '' : 'hidden' %> pt-4">
+      <% if tab[:content] %>
+        <%= tab[:content] %>
+      <% end %>
+    </div>
+  <% end %>
+  <% if tab_contents? %>
+    <% tab_contents.each do |tc| %>
+      <div role="tabpanel"
+           id="panel-<%= tc.instance_variable_get(:@id) %>"
+           data-hw-tabs-target="panel"
+           data-tab-id="<%= tc.instance_variable_get(:@id) %>"
+           class="<%= tc.instance_variable_get(:@id) == @active_tab ? '' : 'hidden' %> pt-4">
+        <%= tc %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/components/hotwirebits/tabs_component.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TabsComponent < Base
+    VARIANTS = {
+      underline: :underline,
+      pill: :pill,
+      enclosed: :enclosed
+    }.freeze
+
+    renders_many :tab_contents, lambda { |id:, **attrs, &block|
+      TabContent.new(id: id, **attrs, &block)
+    }
+
+    class TabContent < Base
+      def initialize(id:, **attrs)
+        @id = id
+        @extra_attrs = attrs
+      end
+    end
+
+    def initialize(tabs: [], variant: :underline, active_tab: nil, **attrs)
+      @tabs = tabs
+      @variant = variant
+      @active_tab = active_tab || tabs.first&.dig(:id)
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def container_classes
+      merge_classes((@variant == :enclosed) ? "rounded-md border border-hw-border p-1" : nil)
+    end
+
+    def list_classes
+      base = "flex"
+      base += " gap-1" if @variant == :pill || @variant == :enclosed
+      base += " border-b border-hw-border" if @variant == :underline
+      merge_classes(base)
+    end
+
+    def tab_classes(active)
+      base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring"
+
+      case @variant
+      when :underline
+        merge_classes(base, " -mb-px border-b-2",
+          active ? "border-hw-primary text-hw-foreground" : "border-transparent text-hw-muted-foreground hover:text-hw-foreground hover:border-hw-border")
+      when :pill
+        merge_classes(base,
+          active ? "bg-hw-primary text-hw-primary-foreground" : "text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground")
+      when :enclosed
+        merge_classes(base,
+          active ? "bg-hw-background text-hw-foreground shadow-sm" : "text-hw-muted-foreground hover:text-hw-foreground")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<span class="<%= tag_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content || @label %>
+</span>

data/app/components/hotwirebits/tag_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TagComponent < Base
+    COLORS = {
+      default: "bg-hw-muted text-hw-muted-foreground",
+      red: "bg-hw-destructive/10 text-hw-destructive dark:bg-hw-destructive/20 dark:text-hw-destructive-foreground",
+      orange: "bg-hw-warning/10 text-hw-warning dark:bg-hw-warning/20 dark:text-hw-warning-foreground",
+      yellow: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-hw-warning",
+      green: "bg-hw-success/10 text-hw-success dark:bg-hw-success/20 dark:text-hw-success-foreground",
+      blue: "bg-hw-info/10 text-hw-info dark:bg-hw-info/20 dark:text-hw-info-foreground",
+      purple: "bg-hw-primary/10 text-hw-primary dark:bg-hw-primary/20 dark:text-hw-primary-foreground",
+      pink: "bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-400"
+    }.freeze
+
+    def initialize(label: nil, color: :default, pill: false, removable: false, **attrs)
+      @label = label
+      @color = color
+      @pill = pill
+      @removable = removable
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def tag_classes
+      radius = @pill ? "rounded-full" : "rounded"
+      merge_classes(
+        "inline-flex items-center px-2 py-0.5 text-xs font-medium",
+        radius,
+        COLORS[@color] || COLORS[:default]
+      )
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="flex flex-wrap gap-1.5 rounded-md border border-hw-input bg-hw-background p-1.5 ring-offset-hw-background focus-within:ring-2 focus-within:ring-hw-ring focus-within:ring-offset-2" data-controller="hw-tag-input" data-hw-tag-input-max-value="<%= @max %>" data-hw-tag-input-pattern-value="<%= @pattern %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @value.each do |v| %>
+    <span class="inline-flex items-center gap-1 rounded-sm bg-hw-secondary px-1.5 py-0.5 text-xs text-hw-secondary-foreground">
+      <span><%= v %></span>
+      <button type="button" class="text-hw-muted-foreground hover:text-hw-foreground" data-action="click->hw-tag-input#remove" data-hw-tag-input-value-param="<%= v %>">
+        <svg class="h-3 w-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
+      </button>
+    </span>
+  <% end %>
+  <input type="text" placeholder="<%= @placeholder %>" <%= 'disabled' if @disabled || (@max && @value.size >= @max) %> <%= 'pattern' if @pattern %> class="flex-1 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground outline-none min-w-[80px]" data-action="keydown->hw-tag-input#keydown blur->hw-tag-input#blur" data-hw-tag-input-target="input">
+  <% @value.each do |v| %>
+    <input type="hidden" name="<%= @name %>[]" value="<%= v %>">
+  <% end %>
+</div>

data/app/components/hotwirebits/tag_input_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TagInputComponent < Base
+    def initialize(name:, value: [], placeholder: "Add tag...", max: nil, pattern: nil, disabled: false, **attrs)
+      @name = name
+      @value = Array(value)
+      @placeholder = placeholder
+      @max = max
+      @pattern = pattern
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def wrapper_classes
+      merge_classes(
+        "flex flex-wrap gap-1.5 rounded-md border border-hw-input bg-hw-background p-1.5",
+        "ring-offset-hw-background focus-within:ring-2 focus-within:ring-hw-ring focus-within:ring-offset-2"
+      )
+    end
+
+    def input_element
+      tag.input(
+        type: "text",
+        placeholder: @placeholder,
+        disabled: @disabled || (@max && @value.size >= @max),
+        pattern: @pattern,
+        class: "flex-1 bg-transparent text-sm text-hw-foreground placeholder:text-hw-muted-foreground outline-none min-w-[80px]",
+        data: {
+          action: "keydown->hw-tag-input#keydown blur->hw-tag-input#blur",
+          rb_tag_input_target: "input"
+        }
+      )
+    end
+
+    def tag_chip(value)
+      tag.span(class: "inline-flex items-center gap-1 rounded-sm bg-hw-secondary px-1.5 py-0.5 text-xs text-hw-secondary-foreground") do
+        safe_join([
+          tag.span(value),
+          tag.button(
+            type: "button",
+            class: "text-hw-muted-foreground hover:text-hw-foreground",
+            data: {action: "click->hw-tag-input#remove", rb_tag_input_value_param: value}
+          ) do
+            tag.svg(class: "h-3 w-3", fill: "none", stroke: "currentColor", stroke_width: "2",
+              viewBox: "0 0 24 24") do
+              tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M6 18L18 6M6 6l12 12")
+            end
+          end
+        ])
+      end
+    end
+  end
+end

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

@@ -0,0 +1,39 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if @title %>
+      <h2 class="text-2xl md:text-3xl font-bold text-hw-foreground text-center mb-12"><%= @title %></h2>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% @members.each do |member| %>
+        <div class="flex flex-col items-center text-center rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if member[:avatar] %>
+            <img src="<%= member[:avatar] %>" alt="<%= member[:name] %>" class="h-20 w-20 rounded-full object-cover mb-4">
+          <% else %>
+            <div class="flex h-20 w-20 items-center justify-center rounded-full bg-hw-muted text-hw-muted-foreground text-xl font-semibold mb-4">
+              <%= member[:name].to_s.split.map(&:first).join %>
+            </div>
+          <% end %>
+          <h3 class="text-base font-semibold text-hw-foreground"><%= member[:name] %></h3>
+          <% if member[:role] %>
+            <p class="text-sm text-hw-primary mt-0.5"><%= member[:role] %></p>
+          <% end %>
+          <% if member[:bio] %>
+            <p class="text-sm text-hw-muted-foreground mt-2 leading-relaxed"><%= member[:bio] %></p>
+          <% end %>
+          <% if member[:social_links]&.any? %>
+            <div class="flex items-center gap-3 mt-4">
+              <% member[:social_links].each do |link| %>
+                <a href="<%= link[:href] %>" class="text-hw-muted-foreground hover:text-hw-foreground transition-colors" target="_blank" rel="noopener noreferrer">
+                  <span class="sr-only"><%= link[:label] %></span>
+                  <% if link[:icon] %>
+                    <span class="h-5 w-5 inline-block"><%= safe_svg(link[:icon]) %></span>
+                  <% end %>
+                </a>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/hotwirebits/team_section_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TeamSectionComponent < Base
+    def initialize(title: nil, members: [], columns: 3, **attrs)
+      @title = title
+      @members = members
+      @columns = [columns, 4].min
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("py-16 md:py-24 px-4", @extra_attrs.delete(:class))
+    end
+
+    def grid_classes
+      "grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-#{@columns}"
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="rounded-lg border border-hw-border bg-hw-foreground overflow-hidden font-mono text-sm" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center gap-2 px-4 py-2.5 bg-hw-foreground/90 border-b border-zinc-800">
+    <div class="flex gap-1.5">
+      <div class="h-3 w-3 rounded-full bg-hw-destructive"></div>
+      <div class="h-3 w-3 rounded-full bg-hw-warning"></div>
+      <div class="h-3 w-3 rounded-full bg-hw-success"></div>
+    </div>
+    <span class="text-xs text-hw-muted-foreground ml-2"><%= @title %></span>
+  </div>
+  <div class="p-4 space-y-1 min-h-[100px]">
+    <% @lines.each do |line| %>
+      <div>
+        <span class="text-hw-success"><%= line[:prompt] || '$' %></span>
+        <span class="text-hw-background ml-1"><%= line[:command] %></span>
+        <% if line[:output] %>
+          <div class="text-hw-muted-foreground mt-0.5 pl-0"><%= line[:output] %></div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/terminal_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TerminalComponent < Base
+    def initialize(lines: [], title: "Terminal", **attrs)
+      @lines = lines
+      @title = title
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @rating %>
+    <div class="flex gap-0.5 mb-3">
+      <% 5.times do |i| %>
+        <svg class="h-4 w-4 <%= i < @rating ? 'text-hw-warning' : 'text-hw-muted' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"/>
+        </svg>
+      <% end %>
+    </div>
+  <% end %>
+  <blockquote class="text-hw-foreground">
+    <p class="text-base leading-relaxed">"<%= @quote %>"</p>
+  </blockquote>
+  <% if @author %>
+    <div class="mt-4 flex items-center gap-3">
+      <% if @avatar %>
+        <img src="<%= @avatar %>" alt="<%= @author %>" class="h-10 w-10 rounded-full object-cover">
+      <% end %>
+      <div>
+        <p class="text-sm font-semibold text-hw-foreground"><%= @author %></p>
+        <% if @role || @company %>
+          <p class="text-sm text-hw-muted-foreground">
+            <%= [@role, @company].compact.join(', ') %>
+          </p>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/testimonial_component.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TestimonialComponent < Base
+    def initialize(quote:, author: nil, role: nil, company: nil, avatar: nil, rating: nil, **attrs)
+      @quote = quote
+      @author = author
+      @role = role
+      @company = company
+      @avatar = avatar
+      @rating = rating
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "rounded-lg border border-hw-border bg-hw-card p-6",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-5xl">
+    <% if @title %>
+      <h2 class="text-3xl md:text-4xl font-bold text-hw-foreground text-center mb-10"><%= @title %></h2>
+    <% end %>
+    <div class="<%= grid_classes %>">
+      <% @testimonials.each do |t| %>
+        <div class="rounded-lg border border-hw-border bg-hw-card p-6">
+          <% if t[:rating] %>
+            <div class="flex gap-0.5 mb-3">
+              <% 5.times do |i| %>
+                <svg class="h-4 w-4 <%= i < t[:rating] ? 'text-hw-warning' : 'text-hw-muted' %>" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"/>
+                </svg>
+              <% end %>
+            </div>
+          <% end %>
+          <blockquote class="text-sm text-hw-foreground leading-relaxed">"<%= t[:quote] %>"</blockquote>
+          <div class="mt-4 flex items-center gap-3">
+            <% if t[:avatar] %>
+              <img src="<%= t[:avatar] %>" alt="<%= t[:author] %>" class="h-9 w-9 rounded-full object-cover">
+            <% end %>
+            <div>
+              <p class="text-sm font-semibold text-hw-foreground"><%= t[:author] %></p>
+              <% if t[:role] %>
+                <p class="text-xs text-hw-muted-foreground"><%= t[:role] %></p>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/components/hotwirebits/testimonials_section_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TestimonialsSectionComponent < Base
+    def initialize(testimonials: [], columns: 3, title: nil, **attrs)
+      @testimonials = testimonials
+      @columns = [columns, 3].min
+      @title = title
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def grid_classes
+      "grid gap-6 grid-cols-1 md:grid-cols-#{@columns}"
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<span class="<%= gradient_class %> bg-clip-text text-transparent font-bold inline-block" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</span>

data/app/components/hotwirebits/text_gradient_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TextGradientComponent < Base
+    DIRECTIONS = %w[to-r to-l to-b to-t to-br to-bl to-tr to-tl].freeze
+
+    def initialize(from_color:, to_color:, direction: "to-r", **attrs)
+      @from_color = from_color
+      @to_color = to_color
+      @direction = DIRECTIONS.include?(direction) ? direction : "to-r"
+      @extra_attrs = attrs
+    end
+
+    def gradient_class
+      "bg-gradient-#{@direction} from-#{@from_color} to-#{@to_color}"
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+<span class="<%= wrapper_classes %>" data-controller="text-rotate" data-text-rotate-interval-value="<%= @interval %>" data-text-rotate-effect-value="<%= @effect %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @texts.each_with_index do |text, idx| %>
+    <span class="block transition-all duration-500 <%= idx == 0 ? '' : effect_classes %>"
+          data-text-rotate-target="item"
+          data-index="<%= idx %>"><%= text %></span>
+<% end %>
+</span>

data/app/components/hotwirebits/text_rotate_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TextRotateComponent < Base
+    def initialize(texts: [], interval: 2000, effect: :fade, **attrs)
+      @texts = texts
+      @interval = interval
+      @effect = effect
+      @extra_attrs = attrs
+    end
+
+    def wrapper_classes
+      merge_classes("inline-block overflow-hidden relative align-baseline", @extra_attrs.delete(:class))
+    end
+
+    def effect_classes
+      case @effect
+      when :slide then "translate-y-full opacity-0"
+      when :flip then "rotate-x-90 opacity-0"
+      else "opacity-0"
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+<textarea name="<%= @name %>" placeholder="<%= @placeholder %>" rows="<%= @rows %>" <%= 'disabled' if @disabled %> <%= 'readonly' if @readonly %> <%= 'required' if @required %> maxlength="<%= @max_length %>" class="<%= textarea_classes %>" <%= tag.attributes(@extra_attrs) %>><%= @value %></textarea>

data/app/components/hotwirebits/textarea_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class TextareaComponent < Base
+    def initialize(name: nil, value: nil, placeholder: nil, rows: 3, max_length: nil, disabled: false, readonly: false,
+      required: false, error: false, resize: true, **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @rows = rows
+      @max_length = max_length
+      @disabled = disabled
+      @readonly = readonly
+      @required = required
+      @error = error
+      @resize = resize
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def textarea_classes
+      error_classes = @error ? "border-hw-destructive focus-visible:ring-hw-destructive" : "border-hw-input focus-visible:ring-hw-ring"
+      resize_class = @resize ? "" : "resize-none"
+      merge_classes(
+        "flex min-h-[60px] w-full rounded-md border 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-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        resize_class,
+        error_classes
+      )
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div data-controller="hw-theme" class="inline-flex items-center gap-2" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          data-action="click->hw-theme#toggle"
+    class="inline-flex items-center gap-2 rounded-md border border-hw-input bg-hw-background px-3 py-2 text-sm font-medium ring-offset-hw-background transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2">
+    <svg data-hw-theme-target="lightIcon" 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="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"/>
+    </svg>
+    <svg data-hw-theme-target="darkIcon" class="h-4 w-4 hidden" 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="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/>
+    </svg>
+    <span data-hw-theme-target="label"><%= @light_label %></span>
+  </button>
+</div>

data/app/components/hotwirebits/theme_controller_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ThemeControllerComponent < Base
+    def initialize(light_label: "Light", dark_label: "Dark", **attrs)
+      @light_label = light_label
+      @dark_label = dark_label
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<span class="inline-flex items-center justify-center <%= SIZES[@size] || 'h-5 w-5' %>" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+</span>

data/app/components/hotwirebits/theme_icon_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ThemeIconComponent < Base
+    SIZES = {
+      xs: "h-3 w-3",
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+      xl: "h-8 w-8"
+    }.freeze
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="relative" data-controller="hw-theme-selector" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          class="inline-flex h-9 items-center gap-2 rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+          data-action="click->hw-theme-selector#toggle click@window->hw-theme-selector#closeOnClickOutside">
+    <svg class="h-4 w-4 text-hw-muted-foreground" 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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+    </svg>
+    <span><%= @current_theme&.capitalize || 'Theme' %></span>
+    <svg class="h-4 w-4 text-hw-muted-foreground" 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="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div data-hw-theme-selector-target="menu" class="hidden absolute right-0 top-full mt-1 z-50 min-w-[12rem] overflow-hidden rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md">
+    <% @themes.each do |theme| %>
+      <button type="button"
+              class="relative flex w-full cursor-pointer select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-hw-accent hover:text-hw-accent-foreground <%= @current_theme == theme[:name] ? 'bg-hw-accent text-hw-accent-foreground' : '' %>"
+              data-theme="<%= theme[:name] %>"
+              data-action="click->hw-theme-selector#select">
+        <% if theme[:preview_color] %>
+          <span class="h-5 w-5 shrink-0 rounded-full border border-hw-border" style="background-color: <%= theme[:preview_color] %>;"></span>
+        <% end %>
+        <span><%= theme[:name].to_s.capitalize %></span>
+        <% if @current_theme == theme[:name] %>
+          <svg class="ml-auto h-4 w-4 text-hw-primary" 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>
+        <% end %>
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/theme_selector_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ThemeSelectorComponent < Base
+    def initialize(themes: [], current_theme: nil, **attrs)
+      @themes = themes
+      @current_theme = current_theme
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<div data-controller="hw-time-picker" data-hw-time-picker-format-value="<%= @time_format %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if twelve_hour? %>
+    <div class="flex items-center gap-2">
+      <input type="text"
+             name="<%= @name %>"
+             value="<%= @value %>"
+             placeholder="12:00"
+             pattern="(0?[1-9]|1[0-2]):[0-5][0-9]"
+             <%= 'disabled' if @disabled %>
+             class="<%= input_classes %>"
+             data-hw-time-picker-target="input">
+      <select class="h-9 rounded-md border border-hw-input bg-hw-background px-2 text-sm text-hw-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2"
+              data-action="change->hw-time-picker#updateMeridiem"
+        data-hw-time-picker-target="meridiem"
+        <%= 'disabled' if @disabled %>>
+        <option value="AM">AM</option>
+        <option value="PM">PM</option>
+      </select>
+    </div>
+  <% else %>
+    <input type="time"
+           name="<%= @name %>"
+           value="<%= @value %>"
+           step="<%= @step * 60 %>"
+           <%= 'disabled' if @disabled %>
+           class="<%= input_classes %>"
+           data-hw-time-picker-target="input">
+  <% end %>
+</div>