hotwirebits 0.1.0

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

@@ -0,0 +1,53 @@
+<section class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-2xl">
+    <div class="text-center mb-10">
+      <h2 class="text-2xl md:text-3xl font-bold text-hw-foreground"><%= @title %></h2>
+      <% if @description %>
+        <p class="mt-3 text-hw-muted-foreground"><%= @description %></p>
+      <% end %>
+    </div>
+    <form class="space-y-6">
+      <% @fields.each do |field| %>
+        <div>
+          <label for="<%= field[:name] %>" class="block text-sm font-medium text-hw-foreground mb-1.5">
+            <%= field[:label] %>
+            <% if field[:required] %>
+              <span class="text-hw-destructive">*</span>
+            <% end %>
+          </label>
+          <% case field[:type] %>
+          <% when 'textarea' %>
+            <textarea
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              rows="<%= field[:rows] || 4 %>"
+              placeholder="<%= field[:placeholder] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"></textarea>
+          <% when 'select' %>
+            <select
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+              <% (field[:options] || []).each do |opt| %>
+                <option value="<%= opt[:value] %>"><%= opt[:label] %></option>
+              <% end %>
+            </select>
+          <% else %>
+            <input
+              type="<%= field[:type] || 'text' %>"
+              id="<%= field[:name] %>"
+              name="<%= field[:name] %>"
+              placeholder="<%= field[:placeholder] %>"
+              <%= 'required' if field[:required] %>
+              class="w-full rounded-lg border border-hw-border bg-hw-background px-3 py-2 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring">
+            <% end %>
+          </div>
+        <% end %>
+        <button type="submit" class="w-full inline-flex items-center justify-center rounded-lg bg-hw-primary text-hw-primary-foreground h-11 px-6 text-sm font-medium shadow-sm hover:bg-hw-primary/90 transition-colors">
+          <%= @submit_label %>
+        </button>
+      </form>
+    </div>
+  </section>

data/app/components/hotwirebits/contact_section_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ContactSectionComponent < Base
+    def initialize(title:, description: nil, fields: [], submit_label: "Submit", **attrs)
+      @title = title
+      @description = description
+      @fields = fields
+      @submit_label = submit_label
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes("py-16 md:py-24 px-4", @extra_attrs.delete(:class))
+    end
+  end
+end

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

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

data/app/components/hotwirebits/container_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class ContainerComponent < Base
+    SIZES = {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      "2xl": "max-w-screen-2xl",
+      full: "max-w-full"
+    }.freeze
+
+    def initialize(size: :lg, centered: true, **attrs)
+      @size = size
+      @centered = centered
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "w-full px-4 sm:px-6 lg:px-8",
+        SIZES[@size],
+        @centered ? "mx-auto" : nil,
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="<%= container_classes %>" data-controller="hw-context-menu" <%= tag.attributes(@extra_attrs) %>>
+  <%= content %>
+  <div class="fixed z-50 hidden min-w-[10rem] rounded-md border border-hw-border bg-hw-popover p-1 text-hw-popover-foreground shadow-md"
+       data-hw-context-menu-target="menu"
+       data-action="click->hw-context-menu#close contextmenu@window->hw-context-menu#close">
+    <% @items.each do |item| %>
+      <% if item[:separator] %>
+        <div class="-mx-1 my-1 h-px bg-hw-border"></div>
+      <% else %>
+        <a href="<%= item[:href] || '#' %>"
+           class="<%= merge_classes(
+             'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+             item[:destructive] ? 'text-hw-destructive hover:bg-hw-destructive/10' : 'hover:bg-hw-accent hover:text-hw-accent-foreground'
+           ) %>"
+           data-action="click->hw-context-menu#close">
+          <% 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[:shortcut] %>
+            <span class="ml-auto text-xs tracking-widest text-hw-muted-foreground"><%= item[:shortcut] %></span>
+          <% end %>
+        </a>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/context_menu_component.rb

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

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

@@ -0,0 +1,23 @@
+<div class="<%= container_classes %>"
+     data-controller="hw-cookie-consent"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="mx-auto max-w-4xl rounded-xl border border-hw-border bg-hw-card p-4 shadow-lg">
+    <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+      <div class="flex-1">
+        <p class="text-sm text-hw-foreground"><%= @message %></p>
+      </div>
+      <div class="flex items-center gap-2 shrink-0">
+        <button type="button"
+                class="rounded-lg border border-hw-border bg-hw-background h-9 px-4 text-sm font-medium text-hw-foreground hover:bg-hw-muted transition-colors"
+                data-action="click->hw-cookie-consent#settings">
+          <%= @settings_label %>
+        </button>
+        <button type="button"
+                class="rounded-lg bg-hw-primary text-hw-primary-foreground h-9 px-4 text-sm font-medium hover:bg-hw-primary/90 transition-colors"
+                data-action="click->hw-cookie-consent#accept">
+          <%= @accept_label %>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/hotwirebits/cookie_consent_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CookieConsentComponent < Base
+    def initialize(message: "We use cookies to improve your experience.", accept_label: "Accept",
+      settings_label: "Settings", position: :bottom, **attrs)
+      @message = message
+      @accept_label = accept_label
+      @settings_label = settings_label
+      @position = position
+      @extra_attrs = attrs
+    end
+
+    def position_classes
+      case @position
+      when :top then "top-0"
+      else "bottom-0"
+      end
+    end
+
+    def container_classes
+      merge_classes(
+        "fixed inset-x-0 #{position_classes} z-50 p-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+<div class="rounded-xl border border-hw-border bg-hw-card p-6 max-w-lg"
+     data-controller="hw-cookie-settings"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between mb-6">
+    <h3 class="text-lg font-semibold text-hw-foreground">Cookie Preferences</h3>
+    <svg class="h-5 w-5 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+    </svg>
+  </div>
+  <div class="space-y-4">
+    <% @categories.each do |cat| %>
+      <div class="flex items-start justify-between gap-4 p-3 rounded-lg bg-hw-muted/50">
+        <div class="flex-1">
+          <p class="text-sm font-medium text-hw-foreground"><%= cat[:name] %></p>
+          <% if cat[:description] %>
+            <p class="text-xs text-hw-muted-foreground mt-0.5"><%= cat[:description] %></p>
+          <% end %>
+        </div>
+        <% if cat[:required] %>
+          <span class="shrink-0 inline-flex items-center rounded-full bg-hw-muted px-2 py-0.5 text-[10px] font-medium text-hw-muted-foreground">Required</span>
+        <% else %>
+          <button type="button"
+                  class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors <%= cat[:enabled] ? 'bg-hw-primary' : 'bg-hw-muted' %>"
+                  data-hw-cookie-settings-target="toggle"
+                  data-category="<%= cat[:name] %>"
+                  data-action="click->hw-cookie-settings#toggle"
+            role="switch"
+            aria-checked="<%= cat[:enabled] %>">
+            <span class="inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform <%= cat[:enabled] ? 'translate-x-4.5' : 'translate-x-0.5' %>"></span>
+          </button>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-center gap-3 mt-6 pt-6 border-t border-hw-border">
+    <button type="button"
+            class="flex-1 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"
+            data-action="click->hw-cookie-settings#rejectAll">
+      Reject All
+    </button>
+    <button type="button"
+            class="flex-1 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-cookie-settings#acceptSelected">
+      Accept Selected
+    </button>
+  </div>
+</div>

data/app/components/hotwirebits/cookie_settings_component.rb

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

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

@@ -0,0 +1,8 @@
+<span data-controller="hw-countdown"
+      data-hw-countdown-value-value="<%= @value %>"
+      data-hw-countdown-target-value="<%= @target %>"
+      data-hw-countdown-duration-value="<%= @duration %>"
+      class="tabular-nums"
+      <%= tag.attributes(@extra_attrs) %>>
+  <%= @prefix %><span data-hw-countdown-target="output"><%= @value %></span><%= @suffix %>
+</span>

data/app/components/hotwirebits/countdown_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CountdownComponent < Base
+    def initialize(value: 0, target: 0, prefix: "", suffix: "", duration: 2000, **attrs)
+      @value = value
+      @target = target
+      @prefix = prefix
+      @suffix = suffix
+      @duration = duration
+      @extra_attrs = attrs
+    end
+  end
+end

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

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

data/app/components/hotwirebits/cta_section_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class CtaSectionComponent < Base
+    def initialize(title:, description: nil, primary_cta: nil, secondary_cta: nil, image_url: nil, variant: :simple,
+      **attrs)
+      @title = title
+      @description = description
+      @primary_cta = primary_cta
+      @secondary_cta = secondary_cta
+      @image_url = image_url
+      @variant = variant
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "py-16 md:py-24 px-4",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<div class="rounded-xl border border-hw-border bg-hw-card p-5" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between mb-3">
+    <p class="text-sm font-medium text-hw-muted-foreground"><%= @title %></p>
+    <% if @icon %>
+      <div class="h-9 w-9 inline-flex items-center justify-center rounded-lg bg-hw-muted text-hw-muted-foreground">
+        <%= safe_svg(@icon) %>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex items-end justify-between">
+    <div>
+      <p class="text-2xl font-bold text-hw-foreground"><%= @value %></p>
+      <% if @trend && @trend_value %>
+        <div class="flex items-center gap-1 mt-1">
+          <% if @trend == :up %>
+            <svg class="h-3.5 w-3.5 <%= trend_color %>" 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 10l7-7m0 0l7 7m-7-7v18"/></svg>
+          <% elsif @trend == :down %>
+            <svg class="h-3.5 w-3.5 <%= trend_color %>" 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 14l-7 7m0 0l-7-7m7 7V3"/></svg>
+          <% end %>
+          <span class="text-xs font-medium <%= trend_color %>"><%= @trend_value %></span>
+        </div>
+      <% end %>
+    </div>
+    <% if @chart_data %>
+      <div class="h-10 w-20">
+        <svg viewBox="0 0 80 40" class="h-full w-full">
+          <polyline fill="none" stroke="currentColor" stroke-width="2" class="text-hw-primary" points="<%= @chart_data.each_with_index.map { |v, i| "#{i * (80.0 / ([@chart_data.size - 1, 1].max))},#{40 - (v.to_f / @chart_data.max * 38)}" }.join(' ') %>"/>
+        </svg>
+      </div>
+    <% end %>
+  </div>
+          </div>

data/app/components/hotwirebits/dashboard_card_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DashboardCardComponent < Base
+    TRENDS = %i[up down neutral].freeze
+
+    def initialize(title:, value:, trend: nil, trend_value: nil, icon: nil, chart_data: nil, **attrs)
+      @title = title
+      @value = value
+      @trend = trend
+      @trend_value = trend_value
+      @icon = icon
+      @chart_data = chart_data
+      @extra_attrs = attrs
+    end
+
+    def trend_color
+      case @trend
+      when :up then "text-hw-success"
+      when :down then "text-hw-destructive"
+      else "text-hw-muted-foreground"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,53 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div class="relative w-full overflow-auto">
+    <table class="w-full text-sm">
+      <thead>
+        <tr class="border-b border-hw-border bg-hw-muted/50">
+          <% @columns.each do |col| %>
+            <th class="h-10 px-4 text-left align-middle font-medium text-hw-muted-foreground">
+              <% if col[:sortable] %>
+                <a href="?sort_by=<%= col[:key] %>&sort_direction=<%= next_sort_direction(col[:key]) %>"
+                   class="inline-flex items-center gap-1 hover:text-hw-foreground transition-colors">
+                  <%= col[:label] %>
+                  <span class="text-xs"><%= sort_icon(col[:key]) %></span>
+                </a>
+              <% else %>
+                <%= col[:label] %>
+              <% end %>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% @rows.each do |row| %>
+          <tr class="border-b border-hw-border transition-colors hover:bg-hw-muted/50">
+            <% @columns.each do |col| %>
+              <td class="p-4 align-middle"><%= row[col[:key]] %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+  <% if @current_page && @total_pages %>
+    <div class="flex items-center justify-between px-4 py-3 border-t border-hw-border">
+      <span class="text-sm text-hw-muted-foreground">
+        Page <%= @current_page %> of <%= @total_pages %>
+      </span>
+      <div class="flex gap-1">
+        <% if @current_page > 1 %>
+          <a href="?page=<%= @current_page - 1 %>"
+             class="px-3 py-1 text-sm rounded-md border border-hw-border hover:bg-hw-muted transition-colors">
+            Prev
+          </a>
+        <% end %>
+        <% if @current_page < @total_pages %>
+          <a href="?page=<%= @current_page + 1 %>"
+             class="px-3 py-1 text-sm rounded-md border border-hw-border hover:bg-hw-muted transition-colors">
+            Next
+          </a>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/data_table_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DataTableComponent < Base
+    def initialize(columns:, rows:, sort_by: nil, sort_direction: :asc, current_page: nil, total_pages: nil, **attrs)
+      @columns = columns
+      @rows = rows
+      @sort_by = sort_by
+      @sort_direction = sort_direction
+      @current_page = current_page
+      @total_pages = total_pages
+      @extra_attrs = attrs
+    end
+
+    def sort_icon(column_key)
+      return unless @columns.find { |c| c[:key] == column_key }&.dig(:sortable)
+
+      if @sort_by == column_key
+        (@sort_direction == :asc) ? "↑" : "↓"
+      else
+        "↕"
+      end
+    end
+
+    def next_sort_direction(column_key)
+      if @sort_by == column_key && @sort_direction == :asc
+        :desc
+      else
+        :asc
+      end
+    end
+
+    def container_classes
+      merge_classes(
+        "rounded-lg border border-hw-border",
+        @extra_attrs.delete(:class)
+      )
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+<div class="space-y-4" data-controller="hw-data-view" <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <span class="text-sm text-hw-muted-foreground">Sort:</span>
+      <span class="text-sm font-medium text-hw-foreground"><%= @sort_by || 'Default' %></span>
+    </div>
+    <div class="inline-flex rounded-md border border-hw-input">
+      <button type="button" class="<%= merge_classes('inline-flex items-center justify-center h-8 w-8 rounded-l-md transition-colors', @view == :grid ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground') %>" data-action="click->hw-data-view#switch" data-view="grid">
+        <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
+      </button>
+      <button type="button" class="<%= merge_classes('inline-flex items-center justify-center h-8 w-8 rounded-r-md -ml-px transition-colors', @view == :list ? 'bg-hw-accent text-hw-accent-foreground' : 'bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground') %>" data-action="click->hw-data-view#switch" data-view="list">
+        <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="M4 6h16M4 12h16M4 18h16"/></svg>
+      </button>
+    </div>
+  </div>
+  <div class="<%= @view == :grid ? 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4' : 'space-y-2' %>" data-hw-data-view-target="content">
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/data_view_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class DataViewComponent < Base
+    renders_many :items
+
+    def initialize(view: :grid, sort_by: nil, per_page: 12, **attrs)
+      @view = view
+      @sort_by = sort_by
+      @per_page = per_page
+      @extra_attrs = attrs
+    end
+
+    private
+
+    def toolbar_element
+      tag.div(class: "flex items-center justify-between") do
+        safe_join([
+          sort_element,
+          view_toggle_element
+        ])
+      end
+    end
+
+    def sort_element
+      tag.div(class: "flex items-center gap-2") do
+        tag.span("Sort:", class: "text-sm text-hw-muted-foreground") +
+          tag.span(@sort_by || "Default", class: "text-sm font-medium text-hw-foreground")
+      end
+    end
+
+    def view_toggle_element
+      tag.div(class: "inline-flex rounded-md border border-hw-input") do
+        safe_join([
+          toggle_button(:grid, true, grid_icon),
+          toggle_button(:list, false, list_icon)
+        ])
+      end
+    end
+
+    def toggle_button(view, first, icon)
+      tag.button(
+        type: "button",
+        class: merge_classes(
+          "inline-flex items-center justify-center h-8 w-8 transition-colors",
+          first ? "rounded-l-md" : "rounded-r-md -ml-px",
+          (@view == view) ? "bg-hw-accent text-hw-accent-foreground" : "bg-transparent text-hw-muted-foreground hover:bg-hw-accent hover:text-hw-accent-foreground"
+        ),
+        data: {action: "click->hw-data-view#switch", view: view}
+      ) do
+        icon
+      end
+    end
+
+    def content_element
+      grid = @view == :grid
+      tag.div(class: grid ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" : "space-y-2",
+        data: {rb_data_view_target: "content"}) do
+        safe_join(items)
+      end
+    end
+
+    def grid_icon
+      tag.svg(class: "h-4 w-4", fill: "none", stroke: "currentColor", stroke_width: "2", viewBox: "0 0 24 24") do
+        tag.path(stroke_linecap: "round", stroke_linejoin: "round",
+          d: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z")
+      end
+    end
+
+    def list_icon
+      tag.svg(class: "h-4 w-4", fill: "none", stroke: "currentColor", stroke_width: "2", viewBox: "0 0 24 24") do
+        tag.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M4 6h16M4 12h16M4 18h16")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+<div class="relative" data-controller="hw-datepicker">
+  <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="date" name="<%= @name %>" value="<%= @value %>" min="<%= @min %>" max="<%= @max %>" <%= 'disabled' if @disabled %> class="flex w-full 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 disabled:cursor-not-allowed disabled:opacity-50 h-9 pl-9 text-sm" <%= tag.attributes(@extra_attrs) %>>
+  </div>
+</div>