hotwirebits 0.1.0

data/app/components/hotwirebits/logo_cloud_component.rb

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

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

@@ -0,0 +1,7 @@
+<a href="<%= @url || '#' %>" class="<%= item_classes %>" <%= @url ? 'target="_blank" rel="noopener noreferrer"'.html_safe : '' %> <%= tag.attributes(@extra_attrs) %>>
+  <% if @image_url %>
+    <img src="<%= @image_url %>" alt="<%= @name %>" class="h-8 md:h-10 object-contain">
+<% else %>
+  <span class="text-lg font-semibold text-hw-muted-foreground"><%= @name %></span>
+<% end %>
+</a>

data/app/components/hotwirebits/logo_item_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class LogoItemComponent < Base
+    def initialize(name:, url: nil, image_url: nil, grayscale: true, **attrs)
+      @name = name
+      @url = url
+      @image_url = image_url
+      @grayscale = grayscale
+      @extra_attrs = attrs
+    end
+
+    def item_classes
+      merge_classes(
+        "flex items-center justify-center transition-all",
+        @grayscale ? "grayscale opacity-60 hover:grayscale-0 hover:opacity-100" : nil
+      )
+    end
+  end
+end

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

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

data/app/components/hotwirebits/mark_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MarkComponent < Base
+    def initialize(color: nil, **attrs)
+      @color = color
+      @extra_attrs = attrs
+    end
+
+    def mark_classes
+      merge_classes(
+        @color || "bg-yellow-200 text-inherit rounded-sm px-0.5",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+<div class="<%= container_classes %>" data-controller="hw-marquee" <%= tag.attributes(@extra_attrs) %>>
+  <div class="<%= track_classes %>"
+       style="animation: <%= animation_name %> <%= @speed %>s linear infinite;">
+    <div class="flex <%= vertical? ? 'flex-col' : 'flex-row' %> items-center gap-8 shrink-0 px-4">
+      <%= content %>
+    </div>
+    <div class="flex <%= vertical? ? 'flex-col' : 'flex-row' %> items-center gap-8 shrink-0 px-4" aria-hidden="true">
+      <%= content %>
+    </div>
+  </div>
+  <style>
+    @keyframes hw-marquee-left {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+    @keyframes hw-marquee-right {
+      0% { transform: translateX(-50%); }
+      100% { transform: translateX(0); }
+    }
+    @keyframes hw-marquee-up {
+      0% { transform: translateY(0); }
+      100% { transform: translateY(-50%); }
+    }
+    @keyframes hw-marquee-down {
+      0% { transform: translateY(-50%); }
+      100% { transform: translateY(0); }
+    }
+  </style>
+</div>

data/app/components/hotwirebits/marquee_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MarqueeComponent < Base
+    renders_one :body
+
+    def initialize(direction: :left, speed: 30, pause_on_hover: true, **attrs)
+      @direction = direction
+      @speed = speed
+      @pause_on_hover = pause_on_hover
+      @extra_attrs = attrs
+    end
+
+    def vertical?
+      %i[up down].include?(@direction)
+    end
+
+    def animation_name
+      "hw-marquee-#{@direction}"
+    end
+
+    def container_classes
+      merge_classes(
+        "overflow-hidden",
+        vertical? ? "h-64" : "w-full",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def track_classes
+      merge_classes(
+        "flex",
+        vertical? ? "flex-col" : "flex-row",
+        @pause_on_hover ? "hover:[animation-play-state:paused]" : nil
+      )
+    end
+  end
+end

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

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

data/app/components/hotwirebits/mask_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MaskComponent < Base
+    SHAPES = {
+      circle: "mask-circle",
+      squircle: "mask-squircle",
+      hexagon: "mask-hexagon",
+      triangle: "mask-triangle",
+      diamond: "mask-diamond"
+    }.freeze
+
+    def initialize(shape: :circle, **attrs)
+      @shape = shape
+      @extra_attrs = attrs
+    end
+
+    def mask_classes
+      merge_classes(
+        SHAPES[@shape],
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,43 @@
+<div class="relative" data-controller="hw-dropdown" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button"
+          class="inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium text-hw-foreground hover:bg-hw-muted"
+          data-action="click->hw-dropdown#toggle mouseenter->hw-dropdown#open"
+    data-hw-dropdown-target="trigger">
+    <%= @trigger_label %>
+    <svg class="h-4 w-4 transition-transform" data-hw-dropdown-target="chevron" 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 left-1/2 z-50 mt-1 hidden w-screen max-w-4xl -translate-x-1/2 rounded-xl border border-hw-border bg-white p-6 shadow-xl"
+       data-hw-dropdown-target="menu"
+       data-action="mouseleave->hw-dropdown#close">
+    <div class="grid grid-cols-<%= [@columns.size, 4].min %> gap-6">
+      <% @columns.each do |col| %>
+        <div>
+          <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-hw-muted-foreground"><%= col[:title] %></p>
+          <ul class="space-y-3">
+            <% col[:links].each do |link| %>
+              <li>
+                <a href="<%= link[:href] %>" class="group flex items-start gap-3 rounded-lg p-2 -m-2 hover:bg-hw-muted">
+                  <% if link[: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="<%= link[:icon] %>"/>
+                      </svg>
+                    </div>
+                  <% end %>
+                  <div>
+                          <p class="text-sm font-medium text-hw-foreground"><%= link[:label] %></p>
+                          <% if link[:desc] %>
+                            <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= link[:desc] %></p>
+                          <% end %>
+                        </div>
+                      </a>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      </div>

data/app/components/hotwirebits/mega_menu_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MegaMenuComponent < Base
+    def initialize(trigger_label:, columns: [], **attrs)
+      @trigger_label = trigger_label
+      @columns = columns
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<nav class="<%= menu_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <div>
+  <a href="<%= item[:href] %>"
+         class="<%= merge_classes(
+           'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+           item[:active] ? 'bg-hw-accent text-hw-accent-foreground font-medium' : 'text-hw-muted-foreground hover:bg-hw-accent/50 hover:text-hw-accent-foreground'
+         ) %>">
+    <% if item[:icon] %>
+      <span class="h-4 w-4 shrink-0"><%= safe_svg(item[:icon]) %></span>
+    <% end %>
+    <span class="flex-1"><%= item[:label] %></span>
+    <% if item[:badge] %>
+      <span class="ml-auto rounded-full bg-hw-primary/10 px-2 py-0.5 text-xs font-medium text-hw-primary"><%= item[:badge] %></span>
+    <% end %>
+  </a>
+  <% if item[:children]&.any? %>
+    <div class="ml-4 mt-0.5 space-y-0.5 border-l border-hw-border pl-3">
+      <% item[:children].each do |child| %>
+        <a href="<%= child[:href] %>"
+               class="<%= merge_classes(
+                 'flex items-center gap-2 rounded-md px-3 py-1.5 text-sm transition-colors',
+                 child[:active] ? 'text-hw-foreground font-medium' : 'text-hw-muted-foreground hover:text-hw-foreground'
+               ) %>">
+          <%= child[:label] %>
+        </a>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+<% end %>
+</nav>

data/app/components/hotwirebits/menu_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MenuComponent < Base
+    def initialize(items: [], orientation: :vertical, **attrs)
+      @items = items
+      @orientation = orientation
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def menu_classes
+      merge_classes(
+        "flex",
+        (@orientation == :horizontal) ? "flex-row gap-1" : "flex-col gap-0.5"
+      )
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+<div class="flex h-10 items-center gap-1 rounded-md border border-hw-border bg-hw-background px-1" data-controller="hw-menubar" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <div class="relative"
+         data-action="mouseenter->hw-menubar#open mouseleave->hw-menubar#close click->hw-menubar#toggle">
+      <button type="button"
+              class="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer">
+        <%= item[:label] %>
+      </button>
+      <% if item[:children]&.any? %>
+        <div data-hw-menubar-target="menu" class="absolute left-0 top-full hidden z-50 min-w-[12rem] pt-1">
+          <div class="rounded-md border border-hw-border bg-hw-popover p-1 shadow-md">
+            <% item[:children].each do |child| %>
+              <% if child[:separator] %>
+                <div class="-mx-1 my-1 h-px bg-hw-border"></div>
+              <% else %>
+                <a href="<%= child[:href] %>"
+                   class="relative flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground transition-colors">
+                  <span><%= child[:label] %></span>
+                  <% if child[:shortcut] %>
+                    <span class="ml-4 text-xs tracking-widest text-hw-muted-foreground"><%= child[:shortcut] %></span>
+                  <% end %>
+                </a>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/menubar_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MenubarComponent < Base
+    def initialize(items: [], **attrs)
+      @items = items
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% @items.each do |item| %>
+    <div>
+      <div class="flex items-center justify-between mb-1">
+        <span class="text-sm font-medium text-hw-foreground"><%= item[:label] %></span>
+        <span class="text-sm text-hw-muted-foreground"><%= bar_percentage(item) %>%</span>
+      </div>
+      <div class="w-full h-2.5 rounded-full bg-hw-muted overflow-hidden">
+        <div
+          class="h-full rounded-full transition-all duration-300 <%= bar_color(item) %>"
+          style="width: <%= bar_percentage(item) %>%;"
+        ></div>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/meter_group_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MeterGroupComponent < Base
+    COLORS = {
+      default: "bg-hw-primary",
+      success: "bg-hw-success",
+      warning: "bg-hw-warning",
+      destructive: "bg-hw-destructive",
+      info: "bg-hw-info"
+    }.freeze
+
+    def initialize(items: nil, meters: nil, **attrs)
+      @items = items || meters || []
+      @extra_attrs = attrs
+    end
+
+    def bar_percentage(item)
+      max = item[:max] || 100
+      return 0 if max.zero?
+
+      [(item[:value].to_f / max * 100).round, 100].min
+    end
+
+    def bar_color(item)
+      COLORS[item[:color]] || COLORS[:default]
+    end
+
+    def container_classes
+      merge_classes(
+        "space-y-3",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+<div data-controller="hw-month-picker" class="space-y-3" <%= tag.attributes(@extra_attrs) %>>
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-month-picker-target="hidden">
+  <div class="flex items-center justify-between gap-2">
+    <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-hw-accent transition-colors" data-action="click->hw-month-picker#prevYear">
+      <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="M15 19l-7-7 7-7"/></svg>
+    </button>
+    <span class="text-sm font-medium" data-hw-month-picker-target="year"><%= current_year %></span>
+    <button type="button" class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-hw-accent transition-colors" data-action="click->hw-month-picker#nextYear">
+      <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="M9 5l7 7-7 7"/></svg>
+    </button>
+  </div>
+  <div class="grid grid-cols-3 gap-1">
+    <% MONTHS.each_with_index do |month, i| %>
+      <button type="button"
+              class="<%= merge_classes(
+                'rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-hw-accent',
+                (i + 1) == current_month ? 'bg-hw-primary text-hw-primary-foreground hover:bg-hw-primary/90' : ''
+              ) %>"
+              data-action="click->hw-month-picker#select"
+        data-month="<%= i + 1 %>">
+        <%= month[0..2] %>
+      </button>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/month_picker_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MonthPickerComponent < Base
+    MONTHS = %w[January February March April May June July August September October November December].freeze
+
+    def initialize(name: nil, value: nil, min_date: nil, max_date: nil, **attrs)
+      @name = name
+      @value = value
+      @min_date = min_date
+      @max_date = max_date
+      @extra_attrs = attrs
+    end
+
+    def current_month
+      if @value.present?
+        begin
+          Date.parse(@value.to_s).month
+        rescue
+          Date.today.month
+        end
+      else
+        Date.today.month
+      end
+    end
+
+    def current_year
+      if @value.present?
+        begin
+          Date.parse(@value.to_s).year
+        rescue
+          Date.today.year
+        end
+      else
+        Date.today.year
+      end
+    end
+
+    def min_year
+      @min_date.present? ? Date.parse(@min_date.to_s).year : current_year - 10
+    rescue
+      current_year - 10
+    end
+
+    def max_year
+      @max_date.present? ? Date.parse(@max_date.to_s).year : current_year + 10
+    rescue
+      current_year + 10
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="relative" data-controller="hw-month-picker-input" <%= tag.attributes(@extra_attrs) %>>
+  <input type="hidden" name="<%= @name %>" value="<%= @value %>" data-hw-month-picker-input-target="hidden">
+  <div class="relative">
+    <div class="absolute left-3 top-1/2 -translate-y-1/2 text-hw-muted-foreground">
+      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+      </svg>
+    </div>
+    <input type="text"
+           readonly
+           value="<%= formatted_value %>"
+           placeholder="<%= @placeholder %>"
+           class="flex h-9 w-full rounded-md border border-hw-input bg-hw-background pl-9 pr-3 text-sm text-hw-foreground ring-offset-hw-background placeholder:text-hw-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 cursor-pointer"
+           data-action="click->hw-month-picker-input#open"
+    data-hw-month-picker-input-target="input">
+  </div>
+  <div class="absolute z-50 mt-1 hidden rounded-md border border-hw-border bg-hw-popover p-3 shadow-md"
+       data-hw-month-picker-input-target="dropdown">
+  </div>
+</div>

data/app/components/hotwirebits/month_picker_input_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MonthPickerInputComponent < Base
+    def initialize(name: nil, value: nil, placeholder: "Select month", **attrs)
+      @name = name
+      @value = value
+      @placeholder = placeholder
+      @extra_attrs = attrs
+    end
+
+    def formatted_value
+      return "" unless @value.present?
+
+      date = Date.parse(@value.to_s)
+      "#{Date::MONTHNAMES[date.month]} #{date.year}"
+    rescue
+      @value.to_s
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+<div class="relative" data-controller="hw-multiselect" <%= tag.attributes(@extra_attrs) %>>
+  <button type="button" <%= 'disabled' if @disabled %> class="flex h-9 w-full items-center justify-between 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" data-action="click->hw-multiselect#toggle">
+    <span class="<%= @selected.any? ? '' : 'text-hw-muted-foreground' %>"><%= @selected.any? ? "#{@selected.size} selected" : @placeholder %></span>
+    <svg class="h-4 w-4 opacity-50" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
+  </button>
+  <div class="absolute z-50 mt-1 w-full rounded-md border border-hw-border bg-hw-popover shadow-md hidden" data-hw-multiselect-target="dropdown">
+    <ul class="max-h-60 overflow-auto p-1">
+      <% @options.each do |opt| %>
+        <% value = opt.is_a?(Array) ? opt.last : opt %>
+        <% label = opt.is_a?(Array) ? opt.first : opt %>
+        <li class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground">
+          <input type="checkbox" name="<%= @name %>[]" value="<%= value %>" <%= 'checked' if @selected.include?(value) %> class="mr-2 h-4 w-4 rounded border-hw-input">
+          <span><%= label %></span>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/components/hotwirebits/multiselect_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class MultiselectComponent < Base
+    def initialize(name: nil, options: [], selected: [], placeholder: "Select options...", disabled: false, max: nil,
+      **attrs)
+      @name = name
+      @options = options
+      @selected = selected || []
+      @placeholder = placeholder
+      @disabled = disabled
+      @max = max
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def trigger
+      tag.button(
+        type: "button",
+        disabled: @disabled,
+        class: "flex h-9 w-full items-center justify-between rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground ring-offset-hw-background placeholder:text-hw-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-hw-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        data: {action: "click->hw-multiselect#toggle"}
+      ) do
+        safe_join([
+          tag.span(@selected.any? ? "#{@selected.size} selected" : @placeholder,
+            class: @selected.any? ? "" : "text-hw-muted-foreground"),
+          tag.svg(class: "h-4 w-4 opacity-50", fill: "none", stroke: "currentColor", stroke_width: "2",
+            viewBox: "0 0 24 24") do
+            tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M19 9l-7 7-7-7")
+          end
+        ])
+      end
+    end
+
+    def dropdown
+      tag.div(class: "absolute z-50 mt-1 w-full rounded-md border border-hw-border bg-hw-popover shadow-md hidden",
+        data: {rb_multiselect_target: "dropdown"}) do
+        tag.ul(class: "max-h-60 overflow-auto p-1") do
+          safe_join(@options.map do |opt|
+            value = opt.is_a?(Array) ? opt.last : opt
+            label = opt.is_a?(Array) ? opt.first : opt
+            checked = @selected.include?(value)
+            tag.li(class: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-hw-accent hover:text-hw-accent-foreground") do
+              safe_join([
+                tag.input(type: "checkbox", name: "#{@name}[]", value: value, checked: checked,
+                  class: "mr-2 h-4 w-4 rounded border-hw-input"),
+                tag.span(label)
+              ])
+            end
+          end)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,10 @@
+<select name="<%= @name %>" <%= 'disabled' if @disabled %> class="<%= select_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <option value="" disabled <%= 'selected' unless @selected %>><%= @placeholder %></option>
+  <% @options.each do |opt| %>
+    <% if opt.is_a?(Array) %>
+      <option value="<%= opt.last %>" <%= 'selected' if @selected == opt.last %>><%= opt.first %></option>
+      <% else %>
+        <option value="<%= opt %>" <%= 'selected' if @selected == opt %>><%= opt %></option>
+        <% end %>
+      <% end %>
+    </select>

data/app/components/hotwirebits/native_select_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class NativeSelectComponent < Base
+    def initialize(name: nil, options: [], selected: nil, placeholder: "Select...", disabled: false, **attrs)
+      @name = name
+      @options = options
+      @selected = selected
+      @placeholder = placeholder
+      @disabled = disabled
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def select_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:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<a href="<%= @href %>" class="<%= link_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <% if @icon %>
+    <span class="h-4 w-4 shrink-0"><%= safe_svg(@icon) %></span>
+<% end %>
+<span class="flex-1"><%= content || @label %></span>
+<% if @badge %>
+  <span class="ml-auto rounded-full bg-hw-primary/10 px-2 py-0.5 text-xs font-medium text-hw-primary"><%= @badge %></span>
+<% end %>
+</a>

data/app/components/hotwirebits/nav_link_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class NavLinkComponent < Base
+    def initialize(label: nil, href: nil, icon: nil, active: false, badge: nil, **attrs)
+      @label = label
+      @href = href
+      @icon = icon
+      @active = active
+      @badge = badge
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def link_classes
+      merge_classes(
+        "group flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+        @active ? "bg-hw-accent text-hw-accent-foreground font-medium" : "text-hw-muted-foreground hover:bg-hw-accent/50 hover:text-hw-accent-foreground"
+      )
+    end
+  end
+end