hotwirebits 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a40b7de08a273db156eb6165af49330d2853523948e112dcd958a7f8d006addc
+  data.tar.gz: eec2645a3beb91d8df74372a352c409530313c18259a94e5dc2c57de7b3ba830
+SHA512:
+  metadata.gz: 3d3fa385463ac0f41f3b0d92b1350a61243e178a500de5f6d698211d0556fbe17290ab26ddc2dc86b793d46f71134b5bd6f6fd1cd9fa71674c39120c6f066040
+  data.tar.gz: 121235e372e531521e480b166fd589344bfd33f74b2af360a59b4c0ac1226b728cef1cc1c2b3141ded88bbfe3a32dd1a2b39fdae0aeec55332b119fffb58a74e

data/CHANGELOG.md

@@ -0,0 +1,46 @@
+# Changelog
+
+All notable changes to HotwireBits will be documented in this file.
+
+## [Unreleased]
+
+### Added
+- JavaScript test suite: 254 Vitest tests covering all 99 Stimulus controllers (15 original + 98 new)
+- Full controller coverage: 34 stub controllers + 65 non-stub controllers all tested
+- Generator tests: 11 Minitest tests for install and component generators
+- CONTRIBUTING.md guide for new contributors
+- CI job for JavaScript tests (`npm test`)
+
+### Fixed
+- CalendarComponentTest: fixed date-dependent test using proper month/year params
+- bin/setup: fixed path resolution bug
+- bin/hotwirebits: fixed RailsBits→HotwireBits naming, updated component list to 241
+- Gemfile: removed 4 duplicate runtime dependencies
+- gemspec: constrained tailwindcss-rails to ~> 3.0
+
+### Changed
+- All 33 ERB partials rewritten for consistency with ViewComponent counterparts
+- StandardRB lint: 0 violations across entire codebase
+- Removed dead `:spec` Rake task and empty `spec/` directory
+- Removed audit_button.json from git tracking
+
+## [0.1.0] - 2026-03-23
+
+### Added
+- Initial release with 240+ components
+- Theme system with CSS custom properties (light/dark mode)
+- 99 Stimulus controllers for interactive components
+- CLI tool (`hotwirebits`) for copy-paste installation
+- ERB partial + ViewComponent dual format for all components
+- Tailwind CSS v4 support
+
+### Components
+- **Primitives**: Button, Badge, Chip, Tag, Avatar, Status, Indicator, Label, Separator, Skeleton, Spinner, Typography, Kbd, Icon, ThemeIcon
+- **Forms**: Input, Password, Number, Search, Phone, Textarea, Checkbox, Radio, Switch, Toggle, Select, NativeSelect, Combobox, MultiSelect, Slider, Rating, DatePicker, InputOTP, InputTags, FileInput, ColorPicker, ColorSwatch, FormGroup
+- **Data Display**: Card, Table, DataTable, Stats, Stat, Timeline, TreeView, List, Image, CodeBlock, NumberFormatter, Diff, Progress, ProgressRing, MeterGroup, Highlight, Mark, Accordion, Collapsible, Spoiler
+- **Navigation**: Navbar, Sidebar, Breadcrumb, Pagination, Tabs, Menu, Dropdown, NavigationMenu, Menubar, DockMenu, Steps, NavLink, Footer, Burger, SpeedDial
+- **Overlays**: Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, HoverCard, Toast, Notification, LoadingOverlay
+- **Feedback**: Alert, EmptyState, Banner, SkeletonCard, Feedback, Swap, Countdown, AnimatedNumber, StatusDot, ThemeController
+- **Layout**: Container, Grid, Flex, Stack, Group, AspectRatio, ScrollArea, Resizable, Box, Center, SimpleGrid, Space, Divider, Join, Mask, BentoGrid, DeviceMockup, AppShell, Splitter, Fluid
+- **Advanced**: Carousel, Calendar, Chart, ChatBubble, Testimonial, KanbanBoard, Search, Clipboard, QRCode, Marquee
+- **Marketing**: Hero, FeatureSection, CTASection, PricingSection, FAQSection, TestimonialsSection, LogoCloud, AuthBlock, ErrorPage, CookieConsent

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HotwireBits Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,156 @@
+# 🧱 HotwireBits
+
+**The most comprehensive free UI component library for Ruby on Rails.**
+
+[![CI](https://github.com/DonsWayo/hotwirebits/actions/workflows/ci.yml/badge.svg)](https://github.com/DonsWayo/hotwirebits/actions)
+[![Gem Version](https://badge.fury.io/rb/hotwirebits.svg)](https://rubygems.org/gems/hotwirebits)
+[![npm](https://img.shields.io/npm/v/@hotwirebits/stimulus)](https://www.npmjs.com/package/@hotwirebits/stimulus)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+---
+
+## What is HotwireBits?
+
+HotwireBits is a **free, open-source** UI component library for Ruby on Rails with **240+ components** and **99 Stimulus controllers**. Each component ships in two formats:
+
+- **ERB partials** — Copy-paste friendly, no magic
+- **ViewComponent classes** — Ruby-first, testable, composable
+
+All styled with **Tailwind CSS v4**, interactive via **Stimulus.js**, and fully **Turbo-compatible** including Turbo Native.
+
+## Quick Start
+
+### As a Gem
+
+```ruby
+# Gemfile
+gem "hotwirebits"
+```
+
+```bash
+bundle install
+rails generate hotwirebits:install
+```
+
+### Copy-Paste (shadcn-style)
+
+```bash
+gem install hotwirebits_cli
+hotwirebits init
+hotwirebits add button card alert
+```
+
+## Components
+
+### Primitives (20)
+Button, Badge, Chip, Tag, Avatar, Status, Indicator, Label, Separator, Skeleton, Spinner, Typography, Kbd, Icon, CloseButton, Toggle, ThemeIcon, Progress, ProgressRing
+
+### Form Controls (22)
+Input, Password, Number, Search, Phone, Textarea, JsonInput, Checkbox, Radio, Switch, Toggle, Select, NativeSelect, Combobox, MultiSelect, Slider, Rating, DatePicker, InputOTP, InputTags, FileInput, ColorPicker
+
+### Data Display (20)
+Card, Table, DataTable, Stats, Stat, Timeline, TreeView, List, Image, CodeBlock, NumberFormatter, Diff, Highlight, Mark, Accordion, Collapsible, Spoiler, MeterGroup, ColorSwatch, FormGroup
+
+### Navigation (15)
+Navbar, Sidebar, Breadcrumb, Pagination, Tabs, Menu, Dropdown, NavigationMenu, Menubar, DockMenu, Steps, NavLink, Footer, Burger, SpeedDial
+
+### Overlays (10)
+Dialog, AlertDialog, Sheet, Drawer, Popover, Tooltip, HoverCard, Toast, Notification, LoadingOverlay
+
+### Feedback (10)
+Alert, EmptyState, Banner, SkeletonCard, Feedback, Swap, Countdown, AnimatedNumber, StatusDot, ThemeController
+
+### Layout (20)
+Container, Grid, Flex, Stack, Group, AspectRatio, ScrollArea, Resizable, Box, Center, SimpleGrid, Space, Divider, Join, Mask, BentoGrid, DeviceMockup, AppShell, Splitter, Fluid
+
+### Advanced (10)
+Carousel, Calendar, Chart, ChatBubble, Testimonial, KanbanBoard, Search, Clipboard, QRCode, Marquee
+
+### Marketing Blocks (10)
+Hero, FeatureSection, CTASection, PricingSection, FAQSection, TestimonialsSection, LogoCloud, AuthBlock, ErrorPage, CookieConsent
+
+## Usage
+
+### ERB Partials
+
+```erb
+<%= render HotwireBits::ButtonComponent.new(label: "Click me", variant: :primary) %>
+
+<%= render HotwireBits::CardComponent.new(title: "Welcome", description: "Get started") do %>
+  <p>Your content here</p>
+<% end %>
+
+<%= render HotwireBits::AlertComponent.new(type: :success, title: "Success!", message: "Changes saved.") %>
+```
+
+### With Stimulus
+
+```erb
+<%= render HotwireBits::DialogComponent.new(title: "Confirm", size: :md) do %>
+  <p>Are you sure?</p>
+  <div class="flex gap-2 justify-end">
+    <%= render HotwireBits::ButtonComponent.new(label: "Cancel", variant: :outline) %>
+    <%= render HotwireBits::ButtonComponent.new(label: "Confirm", variant: :primary) %>
+  </div>
+<% end %>
+```
+
+## Theme System
+
+HotwireBits uses CSS custom properties (shadcn-style) for theming:
+
+```css
+/* Import the theme */
+@import "hotwirebits/theme";
+
+/* Or customize variables */
+:root {
+  --color-hw-primary: hsl(263 70% 58%);
+  --color-hw-primary-foreground: hsl(0 0% 100%);
+}
+```
+
+## Stimulus Controllers
+
+99 Stimulus controllers for interactive components:
+
+```
+hw-accordion  hw-alert      hw-banner     hw-burger
+hw-calendar   hw-carousel   hw-clipboard  hw-collapsible
+hw-combobox   hw-cookie     hw-countdown  hw-datepicker
+hw-dialog     hw-drawer     hw-dropdown   hw-feedback
+hw-highlight  hw-kanban     hw-marquee    hw-menubar
+hw-multiselect hw-otp       hw-password   hw-popover
+hw-rating     hw-resizable  hw-search     hw-sheet
+hw-sidebar    hw-speed-dial hw-spoiler    hw-steps
+hw-swap       hw-switch     hw-tabs       hw-tags
+hw-theme      hw-toast      hw-toggle     hw-tree
+```
+
+## License
+
+MIT License — free for personal and commercial use.
+
+## Test Suite
+
+| Suite | Tests | Tool |
+|-------|-------|------|
+| Components & Helpers | 670 tests, 1477 assertions | Minitest |
+| Stimulus Controllers | 156 tests | Vitest + jsdom |
+| Generators | 11 tests | Minitest |
+
+```bash
+bundle exec rake test   # Ruby tests
+npm test                # JavaScript tests
+bundle exec standardrb  # Lint
+```
+
+## Contributing
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed guidelines.
+
+1. Fork it
+2. Create your feature branch (`git checkout -b feature/amazing`)
+3. Commit your changes (`git commit -am 'feat: add amazing component'`)
+4. Push to the branch (`git push origin feature/amazing`)
+5. Create a Pull Request

data/app/assets/stylesheets/hotwirebits/theme.css

@@ -0,0 +1,131 @@
+/* HotwireBits Theme System — shadcn-style CSS variables for Tailwind CSS v4 */
+
+@theme {
+  --color-hw-background: hsl(0 0% 100%);
+  --color-hw-foreground: hsl(222.2 84% 4.9%);
+  --color-hw-card: hsl(0 0% 100%);
+  --color-hw-card-foreground: hsl(222.2 84% 4.9%);
+  --color-hw-popover: hsl(0 0% 100%);
+  --color-hw-popover-foreground: hsl(222.2 84% 4.9%);
+  --color-hw-primary: hsl(222.2 47.4% 11.2%);
+  --color-hw-primary-foreground: hsl(210 40% 98%);
+  --color-hw-secondary: hsl(210 40% 96.1%);
+  --color-hw-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-hw-muted: hsl(210 40% 96.1%);
+  --color-hw-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-hw-accent: hsl(210 40% 96.1%);
+  --color-hw-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-hw-destructive: hsl(0 84.2% 60.2%);
+  --color-hw-destructive-foreground: hsl(210 40% 98%);
+  --color-hw-success: hsl(142.1 76.2% 36.3%);
+  --color-hw-success-foreground: hsl(355.7 100% 97.3%);
+  --color-hw-warning: hsl(38 92% 50%);
+  --color-hw-warning-foreground: hsl(48 96% 89%);
+  --color-hw-info: hsl(221.2 83.2% 53.3%);
+  --color-hw-info-foreground: hsl(210 40% 98%);
+  --color-hw-border: hsl(214.3 31.8% 91.4%);
+  --color-hw-input: hsl(214.3 31.8% 91.4%);
+  --color-hw-ring: hsl(222.2 84% 4.9%);
+  --color-hw-selection: hsl(210 40% 96.1%);
+  --color-hw-bg: var(--color-hw-background);
+  --color-hw-fg: var(--color-hw-foreground);
+
+  /* Border radius scale */
+  --radius-hw-sm: 0.25rem;
+  --radius-hw-md: 0.375rem;
+  --radius-hw-lg: 0.5rem;
+  --radius-hw-xl: 0.75rem;
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    @apply border-hw-border;
+  }
+
+  html {
+    @apply antialiased;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-hw-background text-hw-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+@utility hw-border {
+  border-color: var(--color-hw-border);
+}
+
+@utility hw-ring {
+  box-shadow: 0 0 0 2px var(--color-hw-ring);
+}
+
+@utility hw-ring-offset {
+  box-shadow: 0 0 0 2px var(--color-hw-background), 0 0 0 4px var(--color-hw-ring);
+}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+  :root:not(.hw-light) {
+    --color-hw-background: hsl(222.2 84% 4.9%);
+    --color-hw-foreground: hsl(210 40% 98%);
+    --color-hw-card: hsl(222.2 84% 4.9%);
+    --color-hw-card-foreground: hsl(210 40% 98%);
+    --color-hw-popover: hsl(222.2 84% 4.9%);
+    --color-hw-popover-foreground: hsl(210 40% 98%);
+    --color-hw-primary: hsl(210 40% 98%);
+    --color-hw-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --color-hw-secondary: hsl(217.2 32.6% 17.5%);
+    --color-hw-secondary-foreground: hsl(210 40% 98%);
+    --color-hw-muted: hsl(217.2 32.6% 17.5%);
+    --color-hw-muted-foreground: hsl(215 20.2% 65.1%);
+    --color-hw-accent: hsl(217.2 32.6% 17.5%);
+    --color-hw-accent-foreground: hsl(210 40% 98%);
+    --color-hw-destructive: hsl(0 62.8% 30.6%);
+    --color-hw-destructive-foreground: hsl(210 40% 98%);
+    --color-hw-success: hsl(142.1 70.6% 45.3%);
+    --color-hw-success-foreground: hsl(144.9 80.4% 10%);
+    --color-hw-warning: hsl(48 96% 53%);
+    --color-hw-warning-foreground: hsl(36 45.5% 10%);
+    --color-hw-info: hsl(217.2 91.2% 59.8%);
+    --color-hw-info-foreground: hsl(222.2 47.4% 11.2%);
+    --color-hw-border: hsl(217.2 32.6% 17.5%);
+    --color-hw-input: hsl(217.2 32.6% 17.5%);
+    --color-hw-ring: hsl(212.7 26.8% 83.9%);
+    --color-hw-selection: hsl(217.2 32.6% 17.5%);
+  }
+}
+
+/* Explicit dark mode class */
+.dark {
+  --color-hw-background: hsl(222.2 84% 4.9%);
+  --color-hw-foreground: hsl(210 40% 98%);
+  --color-hw-card: hsl(222.2 84% 4.9%);
+  --color-hw-card-foreground: hsl(210 40% 98%);
+  --color-hw-popover: hsl(222.2 84% 4.9%);
+  --color-hw-popover-foreground: hsl(210 40% 98%);
+  --color-hw-primary: hsl(210 40% 98%);
+  --color-hw-primary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-hw-secondary: hsl(217.2 32.6% 17.5%);
+  --color-hw-secondary-foreground: hsl(210 40% 98%);
+  --color-hw-muted: hsl(217.2 32.6% 17.5%);
+  --color-hw-muted-foreground: hsl(215 20.2% 65.1%);
+  --color-hw-accent: hsl(217.2 32.6% 17.5%);
+  --color-hw-accent-foreground: hsl(210 40% 98%);
+  --color-hw-destructive: hsl(0 62.8% 30.6%);
+  --color-hw-destructive-foreground: hsl(210 40% 98%);
+  --color-hw-success: hsl(142.1 70.6% 45.3%);
+  --color-hw-success-foreground: hsl(144.9 80.4% 10%);
+  --color-hw-warning: hsl(48 96% 53%);
+  --color-hw-warning-foreground: hsl(36 45.5% 10%);
+  --color-hw-info: hsl(217.2 91.2% 59.8%);
+  --color-hw-info-foreground: hsl(222.2 47.4% 11.2%);
+  --color-hw-border: hsl(217.2 32.6% 17.5%);
+  --color-hw-input: hsl(217.2 32.6% 17.5%);
+  --color-hw-ring: hsl(212.7 26.8% 83.9%);
+  --color-hw-selection: hsl(217.2 32.6% 17.5%);
+}

data/app/assets/stylesheets/hotwirebits/themes/corporate.css

@@ -0,0 +1,29 @@
+/* HotwireBits — Corporate theme */
+@theme {
+  --color-hw-primary: hsl(220 60% 50%);
+  --color-hw-primary-foreground: hsl(0 0% 100%);
+  --color-hw-secondary: hsl(220 20% 94%);
+  --color-hw-secondary-foreground: hsl(220 60% 15%);
+  --color-hw-accent: hsl(180 60% 45%);
+  --color-hw-accent-foreground: hsl(0 0% 100%);
+  --color-hw-background: hsl(0 0% 100%);
+  --color-hw-foreground: hsl(220 60% 10%);
+  --color-hw-card: hsl(0 0% 100%);
+  --color-hw-card-foreground: hsl(220 60% 10%);
+  --color-hw-popover: hsl(0 0% 100%);
+  --color-hw-popover-foreground: hsl(220 60% 10%);
+  --color-hw-muted: hsl(220 20% 94%);
+  --color-hw-muted-foreground: hsl(220 15% 45%);
+  --color-hw-destructive: hsl(0 84% 60%);
+  --color-hw-destructive-foreground: hsl(0 0% 100%);
+  --color-hw-success: hsl(142 76% 36%);
+  --color-hw-success-foreground: hsl(0 0% 100%);
+  --color-hw-warning: hsl(38 92% 50%);
+  --color-hw-warning-foreground: hsl(0 0% 100%);
+  --color-hw-info: hsl(220 83% 53%);
+  --color-hw-info-foreground: hsl(0 0% 100%);
+  --color-hw-border: hsl(220 20% 88%);
+  --color-hw-input: hsl(220 20% 88%);
+  --color-hw-ring: hsl(220 60% 50%);
+  --color-hw-selection: hsl(220 20% 94%);
+}

data/app/assets/stylesheets/hotwirebits/themes/midnight.css

@@ -0,0 +1,29 @@
+/* HotwireBits — Midnight (dark) theme */
+@theme {
+  --color-hw-primary: hsl(263 70% 58%);
+  --color-hw-primary-foreground: hsl(0 0% 100%);
+  --color-hw-secondary: hsl(240 3.7% 15.9%);
+  --color-hw-secondary-foreground: hsl(0 0% 98%);
+  --color-hw-accent: hsl(263 70% 58%);
+  --color-hw-accent-foreground: hsl(0 0% 100%);
+  --color-hw-background: hsl(240 10% 3.9%);
+  --color-hw-foreground: hsl(0 0% 98%);
+  --color-hw-card: hsl(240 10% 3.9%);
+  --color-hw-card-foreground: hsl(0 0% 98%);
+  --color-hw-popover: hsl(240 10% 3.9%);
+  --color-hw-popover-foreground: hsl(0 0% 98%);
+  --color-hw-muted: hsl(240 3.7% 15.9%);
+  --color-hw-muted-foreground: hsl(240 5% 64.9%);
+  --color-hw-destructive: hsl(0 63% 31%);
+  --color-hw-destructive-foreground: hsl(0 0% 98%);
+  --color-hw-success: hsl(142 71% 45%);
+  --color-hw-success-foreground: hsl(0 0% 98%);
+  --color-hw-warning: hsl(48 96% 53%);
+  --color-hw-warning-foreground: hsl(240 10% 3.9%);
+  --color-hw-info: hsl(217 91% 60%);
+  --color-hw-info-foreground: hsl(0 0% 98%);
+  --color-hw-border: hsl(240 3.7% 15.9%);
+  --color-hw-input: hsl(240 3.7% 15.9%);
+  --color-hw-ring: hsl(240 5% 64.9%);
+  --color-hw-selection: hsl(240 3.7% 15.9%);
+}

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

@@ -0,0 +1,23 @@
+<div class="<%= container_classes %>" <%= tag.attributes(@extra_attrs) %>>
+  <div data-controller="hw-accordion" data-hw-accordion-multiple-value="<%= @multiple %>">
+    <% @items.each_with_index do |item, index| %>
+      <div class="<%= panel_classes(index) %>">
+        <button
+          type="button"
+          class="flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium hover:bg-hw-muted/50 transition-colors"
+          data-action="click->hw-accordion#toggle"
+          data-hw-accordion-target="trigger"
+          >
+          <span><%= item[:title] %></span>
+          <svg class="h-4 w-4 shrink-0 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/>
+          </svg>
+        </button>
+        <div class="hidden px-4 pb-4 text-sm text-hw-muted-foreground" data-hw-accordion-target="content">
+          <%= item[:content] %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/hotwirebits/accordion_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AccordionComponent < Base
+    VARIANTS = {
+      default: "",
+      bordered: "border border-hw-border rounded-lg overflow-hidden",
+      card: "border border-hw-border rounded-lg overflow-hidden shadow-sm"
+    }.freeze
+
+    def initialize(items: [], multiple: false, variant: :default, **attrs)
+      @items = items
+      @multiple = multiple
+      @variant = variant
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        @multiple ? "" : "space-y-1",
+        VARIANTS[@variant] || VARIANTS[:default],
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def panel_classes(index)
+      if %i[bordered card].include?(@variant)
+        (index > 0) ? "border-t border-hw-border" : ""
+      else
+        "border border-hw-border rounded-lg"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+<div class="space-y-0" <%= tag.attributes(@extra_attrs) %>>
+  <div class="relative">
+    <div class="absolute left-4 top-0 bottom-0 w-px bg-hw-border"></div>
+    <div class="space-y-6">
+      <% @items.each do |item| %>
+        <div class="relative flex gap-4 pl-10">
+          <div class="absolute left-0 top-0">
+            <% if item[:avatar] %>
+              <img src="<%= item[:avatar] %>" alt="<%= item[:actor] %>" class="h-8 w-8 rounded-full object-cover border-2 border-hw-background">
+            <% else %>
+              <div class="h-8 w-8 rounded-full bg-hw-muted flex items-center justify-center text-xs font-medium text-hw-muted-foreground border-2 border-hw-background">
+                <%= item[:actor]&.chars&.first&.upcase %>
+              </div>
+            <% end %>
+          </div>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm text-hw-foreground">
+              <span class="font-medium"><%= item[:actor] %></span>
+              <span class="text-hw-muted-foreground"> <%= item[:action] %> </span>
+              <span class="font-medium"><%= item[:target] %></span>
+            </p>
+            <% if item[:time] %>
+              <p class="mt-0.5 text-xs text-hw-muted-foreground"><%= item[:time] %></p>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+  <% if @load_more %>
+    <div class="pt-4 text-center">
+      <button type="button"
+              class="inline-flex h-8 items-center justify-center rounded-md border border-hw-input bg-hw-background px-4 text-xs font-medium text-hw-foreground hover:bg-hw-accent transition-colors cursor-pointer"
+              data-controller="hw-activity-feed"
+              data-action="click->hw-activity-feed#loadMore">
+        Load more
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/components/hotwirebits/activity_feed_component.rb

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

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

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

data/app/components/hotwirebits/affix_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AffixComponent < Base
+    def initialize(position: :top, offset: 0, z_index: 40, **attrs)
+      @position = position
+      @offset = offset
+      @z_index = z_index
+      @extra_attrs = attrs
+    end
+
+    def container_classes
+      merge_classes(
+        "w-full",
+        (@position == :top) ? "fixed top-0" : "fixed bottom-0",
+        @extra_attrs.delete(:class)
+      )
+    end
+
+    def container_styles
+      offset_prop = (@position == :top) ? "top: #{@offset}px;" : "bottom: #{@offset}px;"
+      "#{offset_prop} z-index: #{@z_index};"
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<div class="flex flex-col rounded-lg border border-hw-border bg-hw-card overflow-hidden"
+     data-controller="hw-ai-chat"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex-1 overflow-y-auto p-4 space-y-4 min-h-[300px] max-h-[500px]" data-hw-ai-chat-target="messages">
+    <% @messages.each do |msg| %>
+      <div class="flex <%= msg[:role] == 'user' ? 'justify-end' : 'justify-start' %>">
+        <div class="<%= merge_classes('max-w-[80%] rounded-2xl px-4 py-2.5 text-sm',
+          msg[:role] == 'user' ? 'bg-hw-primary text-hw-primary-foreground rounded-br-md' : 'bg-hw-muted text-hw-foreground rounded-bl-md') %>">
+          <p><%= msg[:content] %></p>
+          <% if msg[:timestamp] %>
+            <span class="block mt-1 text-[10px] opacity-60"><%= msg[:timestamp] %></span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="border-t border-hw-border p-3">
+    <form data-action="submit->hw-ai-chat#send" class="flex items-center gap-2">
+      <input type="text"
+             placeholder="<%= @placeholder %>"
+             class="flex-1 h-9 rounded-md border border-hw-input bg-hw-background px-3 text-sm text-hw-foreground placeholder:text-hw-muted-foreground focus:outline-none focus:ring-2 focus:ring-hw-ring"
+             data-hw-ai-chat-target="input">
+      <button type="submit"
+              class="inline-flex h-9 items-center justify-center rounded-md bg-hw-primary px-4 text-sm font-medium text-hw-primary-foreground hover:bg-hw-primary/90 transition-colors cursor-pointer">
+        <%= @send_label %>
+        <svg class="ml-1.5 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
+        </svg>
+      </button>
+    </form>
+  </div>
+</div>

data/app/components/hotwirebits/ai_chat_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module HotwireBits
+  class AiChatComponent < Base
+    def initialize(messages: [], placeholder: "Type a message...", send_label: "Send", **attrs)
+      @messages = messages
+      @placeholder = placeholder
+      @send_label = send_label
+      @extra_attrs = attrs
+    end
+  end
+end

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

@@ -0,0 +1,32 @@
+<div class="<%= alert_classes %>"
+     data-controller="hw-alert"
+     role="alert"
+     <%= tag.attributes(@extra_attrs) %>>
+  <div class="flex items-start gap-3">
+    <% if @icon %>
+      <svg class="mt-0.5 h-5 w-5 shrink-0" 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="<%= type_config[:icon] %>"/>
+      </svg>
+    <% end %>
+
+    <div class="flex-1">
+          <% if @title %>
+            <h5 class="mb-1 font-medium leading-none tracking-tight"><%= @title %></h5>
+          <% end %>
+          <% if @message %>
+            <div class="text-sm opacity-90"><%= @message %></div>
+          <% end %>
+          <%= content if content.present? %>
+        </div>
+        <% if @dismissible %>
+          <button type="button"
+              class="shrink-0 rounded-sm opacity-70 ring-offset-hw-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-hw-ring focus:ring-offset-2"
+              data-action="click->hw-alert#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>
+            <span class="sr-only">Dismiss</span>
+          </button>
+        <% end %>
+      </div>
+    </div>