better_ui 0.6.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d5ce58a483a9db3c7164c77c50c5206f83304c2b52f6ebff2d92dbc2ddfe0c78
-  data.tar.gz: 262e9f1b61ccf46254e582c2466cf4fea4c89d6ec48cb1117cb63355996a3e2c
+  metadata.gz: 901faa502739d5315ad85daca3b71de07b07f27cf3e0bce6ff613ff95f4aa749
+  data.tar.gz: 8035578f8400b55714940ae366de2dd0543648c5c7238efa73d82ef7808fb247
 SHA512:
-  metadata.gz: 9d024e430e9eb3d69c30adc09b8cff4a8a79a3585ea0769abe0e279c7dcb54b36faf7239ad393436f5558dc0db67c29a66e7eac8f32a11232d12cffbffc2cb96
-  data.tar.gz: 4c18bd0f1df604a289bab875eee931283616cd22f7b1a24e239446643392228a09b92f0e9b54888b9c3d8bdc2074a089ff0d35373aca0e60bccda86ef7b843fe
+  metadata.gz: 3f2d7365e452d664eb6edd0558f172ca9d5d36f1dc7e856d7b76171cabab7fb9bc491207d46474ede9d5487d02eca729efc76dcf449d2ad95dff256d36064e04
+  data.tar.gz: 7055b3abfe4b843f68b4ff06005b33862b1d13855fc312688a81c474c44034be629e7690ab1572596d4bb22591575336b44b95783e2487eb1f7a6b9bd2f1ec9a

data/README.md

@@ -1,301 +1,346 @@
-# BetterUI
+# BetterUi
 
-Una libreria completa di componenti UI per applicazioni Rails costruita con ViewComponent e Tailwind CSS. Include 26 componenti con un sistema di design unificato e documentazione interattiva.
+A modern Rails UI component library built with ViewComponent and Tailwind CSS v4. BetterUi provides a comprehensive set of customizable, accessible, and production-ready components for Rails applications.
 
-- 🎨 **Componenti Eleganti**: Componenti UI pre-costruiti con styling Tailwind CSS
-- 📖 **Documentazione Interattiva**: Preview Lookbook integrate per tutti i componenti
-- 🔧 **Altamente Personalizzabile**: Opzioni di configurazione flessibili per ogni componente
-- 🚀 **Production Ready**: Componenti testati che seguono le best practices
-- 📱 **Responsive**: Tutti i componenti sono mobile-first e responsive
-- ♿ **Accessibile**: Costruiti pensando all'accessibilità
+## Important: Dual Distribution
 
-## Panoramica
+BetterUi uses a **dual distribution model**:
+- **Ruby gem** (`better_ui`) - ViewComponents for Rails
+- **npm package** (`@pandev-srl/better-ui`) - JavaScript (Stimulus controllers) and CSS (theme)
 
-Better UI è una gem Rails che fornisce una collezione di componenti UI riutilizzabili costruiti con ViewComponent e Tailwind CSS. Include un sistema di design unificato con tematizzazione consistente e gestione completa dei form.
+Your Rails application must install both. See [Installation Guide](doc/INSTALLATION.md) for detailed setup instructions.
 
-### Caratteristiche Principali
-
-- **Solo TailwindCSS**: Approccio puro Tailwind senza file CSS/SCSS personalizzati
-- **26 Componenti**: Libreria completa organizzata per scopo
-- **Sistema Input Unificato**: Componenti input supportano 14+ tipi (text, email, password, number, date, time, etc.)
-- **Documentazione Interattiva**: Integrazione Lookbook con preview live
-- **Sistema Helper**: Helper Rails-friendly con integrazione form builder
-- **Tematizzazione Consistente**: 9 temi standard (default, white, red, rose, orange, green, blue, yellow, violet)
-- **Dimensionamento Flessibile**: 3 dimensioni standard (small, medium, large) con 5 opzioni border radius
-- **Accessibilità**: Componenti progettati seguendo le best practices di accessibilità
-
-## Installazione
-
-Aggiungi questa riga al Gemfile della tua applicazione:
-
-```ruby
-gem "better_ui"
-```
-
-Per lo sviluppo con documentazione Lookbook:
+## Quick Start
 
 ```ruby
+# Gemfile
 gem "better_ui"
-gem "lookbook", group: :development
 ```
 
-Quindi esegui:
-
 ```bash
-$ bundle install
+bundle install
+yarn add @pandev-srl/better-ui
 ```
 
-## Setup
+**JavaScript** (app/javascript/application.js):
+```javascript
+import { Application } from "@hotwired/stimulus"
+import { registerControllers } from "@pandev-srl/better-ui"
 
-### 1. Mount Engine (Opzionale)
-
-Se vuoi accedere alle route interne di BetterUI, monta l'engine in `config/routes.rb`:
+const application = Application.start()
+registerControllers(application)
+```
 
-```ruby
-Rails.application.routes.draw do
-  mount BetterUi::Engine => "/better_ui"
-  # le tue altre route...
-end
+**CSS** (app/assets/stylesheets/application.css):
+```css
+/* Full bundle (recommended) */
+@import "@pandev-srl/better-ui/css";
+@source "../../../vendor/bundle/**/*.{rb,erb}";
+
+/* Or import individual modules for customization */
+/* @import "tailwindcss"; */
+/* @import "@pandev-srl/better-ui/theme"; */
+/* @import "@pandev-srl/better-ui/typography"; */
+/* @import "@pandev-srl/better-ui/utilities"; */
 ```
 
-### 2. Setup Lookbook (Raccomandato per Development)
+```erb
+<!-- In your views -->
+<%= render BetterUi::ButtonComponent.new(
+  label: "Get Started",
+  variant: "primary",
+  size: "lg"
+) %>
+```
 
-Per accedere alla documentazione interattiva dei componenti durante lo sviluppo, monta Lookbook in `config/routes.rb`:
+## Features
 
-```ruby
-Rails.application.routes.draw do
-  # Monta Lookbook solo in development
-  mount Lookbook::Engine => "/lookbook" if Rails.env.development?
+- **Rails 8.1+ Compatible**: Built for modern Rails applications
+- **ViewComponent Architecture**: Encapsulated, testable, and reusable components
+- **Tailwind CSS v4**: Leverages the latest Tailwind features with OKLCH color space
+- **Fully Customizable**: 9 semantic color variants with complete theme control
+- **Form Builder Integration**: Seamless integration with Rails forms via `UiFormBuilder`
+- **Stimulus Controllers**: Interactive components with built-in JavaScript behaviors
+- **Accessible by Default**: ARIA attributes and keyboard navigation support
+- **Production Ready**: Battle-tested components with comprehensive documentation
 
-  # le tue altre route...
-end
-```
+## Installation
 
-**Fatto!** I componenti BetterUI e le loro preview sono automaticamente disponibili in Lookbook.
+For detailed installation and configuration instructions, see the [Installation Guide](doc/INSTALLATION.md).
 
-### 3. Includi Tailwind CSS
+### Prerequisites
 
-Assicurati che la tua applicazione includa Tailwind CSS, dato che i componenti BetterUI si basano sulle classi Tailwind. Se non hai Tailwind CSS installato, segui la [guida ufficiale di installazione Tailwind CSS](https://tailwindcss.com/docs/guides/ruby-on-rails).
+- Rails 8.1.1 or higher
+- Node.js and npm (for Tailwind CSS)
+- Tailwind CSS v4 (currently in beta)
 
-## Utilizzo
+## Component Overview
 
-I componenti Better UI possono essere utilizzati in due modi: istanziazione diretta o metodi helper.
+### Core Components
 
-### Metodi Helper (Raccomandato)
+#### Button Component
+A versatile button component with multiple styles, sizes, and states.
+- **Variants**: primary, secondary, accent, success, danger, warning, info, light, dark
+- **Styles**: solid, outline, ghost, soft
+- **Sizes**: xs, sm, md, lg, xl
+- **Features**: Loading states, icons, disabled states
 
 ```erb
-<%# Input di testo con validazione %>
-<%= bui_input_text(
-  name: 'email',
-  value: @user.email,
-  type: :email,
-  theme: :blue,
-  size: :large,
-  required: true
-) %>
-
-<%# Button con theme e size %>
-<%= bui_button(
-  'Invia Form',
-  theme: :green,
-  size: :large,
-  type: :submit
-) %>
-
-<%# Card con blocco di contenuto %>
-<%= bui_card(title: 'Profilo Utente', theme: :white) do %>
-  <p>Contenuto informazioni utente qui</p>
+<%= render BetterUi::ButtonComponent.new(
+  label: "Save Changes",
+  variant: "success",
+  style: "solid"
+) do |c| %>
+  <% c.with_icon_before { "💾" } %>
 <% end %>
+```
+
+#### Card Component
+A flexible container component with customizable padding and optional slots.
+- **Variants**: primary, secondary, accent, success, danger, warning, info, light, dark
+- **Styles**: solid, outline, ghost, soft, bordered
+- **Sizes**: xs, sm, md, lg, xl
+- **Slots**: header, body, footer
 
-<%# Integrazione con form %>
-<%= form_with model: @user do |form| %>
-  <%= bui_input_text(name: 'name', form: form, required: true) %>
-  <%= bui_input_text(name: 'email', type: :email, form: form) %>
-  <%= bui_button('Salva', type: :submit, theme: :blue) %>
+```erb
+<%= render BetterUi::CardComponent.new(size: :lg, style: :bordered) do |c| %>
+  <% c.with_header { "Card Title" } %>
+  <% c.with_body { "Card content goes here" } %>
+  <% c.with_footer { "Footer content" } %>
 <% end %>
 ```
 
-### Istanziazione Diretta
+#### Action Messages Component
+Display notifications, alerts, and validation messages with style.
+- **Variants**: All 9 semantic color variants
+- **Styles**: solid, soft, outline, ghost
+- **Features**: Dismissible, auto-dismiss, titles, icons
 
 ```erb
-<%# Rendering diretto del componente %>
-<%= render BetterUi::General::Input::Text::Component.new(
-  name: 'username',
-  type: :text,
-  theme: :default,
-  size: :medium
+<%= render BetterUi::ActionMessagesComponent.new(
+  variant: "danger",
+  title: "Validation Errors",
+  messages: @model.errors.full_messages,
+  dismissible: true,
+  auto_dismiss: 10
 ) %>
+```
 
-<%# Componente button %>
-<%= render BetterUi::General::Button::Component.new(
-  'Cliccami',
-  theme: :blue,
-  size: :large
-) %>
+### Form Components
+
+#### Text Input Component
+Standard text input with error handling and icon support.
+
+```erb
+<%= render BetterUi::Forms::TextInputComponent.new(
+  name: "user[email]",
+  label: "Email Address",
+  hint: "We'll never share your email",
+  placeholder: "you@example.com"
+) do |c| %>
+  <% c.with_prefix_icon { "@" } %>
+<% end %>
 ```
 
-### Sistema di Tematizzazione
+#### Number Input Component
+Numeric input with min/max validation and optional spinners.
 
-Tutti i componenti supportano tematizzazione consistente:
+```erb
+<%= render BetterUi::Forms::NumberInputComponent.new(
+  name: "product[price]",
+  label: "Price",
+  min: 0,
+  step: 0.01,
+  show_spinner: false
+) do |c| %>
+  <% c.with_prefix_icon { "$" } %>
+<% end %>
+```
 
-- **9 Temi Standard**: default, white, red, rose, orange, green, blue, yellow, violet
-- **3 Dimensioni Standard**: small, medium, large
-- **5 Opzioni Border Radius**: none, small, medium, large, full
+#### Password Input Component
+Password field with visibility toggle functionality.
 
-### Approccio Styling
+```erb
+<%= render BetterUi::Forms::PasswordInputComponent.new(
+  name: "user[password]",
+  label: "Password",
+  hint: "Minimum 8 characters"
+) %>
+```
 
-Better UI usa un approccio TailwindCSS puro con costanti per styling manutenibile:
+#### Textarea Component
+Multi-line text input with resizing options.
 
-```ruby
-# Le costanti del componente definiscono le opzioni di styling
-BUTTON_THEME_CLASSES = {
-  default: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
-  blue: 'bg-blue-600 text-white hover:bg-blue-700',
-  green: 'bg-green-600 text-white hover:bg-green-700'
-}.freeze
-
-BUTTON_SIZE_CLASSES = {
-  small: 'px-3 py-1.5 text-sm',
-  medium: 'px-4 py-2 text-base',
-  large: 'px-6 py-3 text-lg'
-}.freeze
+```erb
+<%= render BetterUi::Forms::TextareaComponent.new(
+  name: "post[content]",
+  label: "Content",
+  rows: 6,
+  resize: :vertical,
+  maxlength: 1000
+) %>
 ```
 
-## Componenti Disponibili
+#### Checkbox Component
+Single checkbox with color variants and label positioning.
 
-Better UI include 26 componenti organizzati in tre categorie:
+```erb
+<%= render BetterUi::Forms::CheckboxComponent.new(
+  name: "user[terms]",
+  label: "I agree to the terms and conditions",
+  variant: :primary
+) %>
+```
 
-### Componenti Application (4)
+#### Checkbox Group Component
+Multiple checkboxes for selecting from a collection.
 
-Componenti di layout e navigazione per interfacce applicative:
+```erb
+<%= render BetterUi::Forms::CheckboxGroupComponent.new(
+  name: "user[roles]",
+  collection: [["Admin", "admin"], ["Editor", "editor"]],
+  legend: "User Roles",
+  orientation: :vertical
+) %>
+```
 
-- **Card**: Container di contenuto con supporto header e azioni
-- **Main**: Area contenuto principale dell'applicazione con layout responsive
-- **Navbar**: Barra di navigazione superiore con supporto contenuto flessibile
-- **Sidebar**: Navigazione laterale collassabile
+### Drawer Layout Components
 
-### Componenti General (22)
+BetterUi provides a complete drawer layout system for building responsive admin dashboards and applications with sidebar navigation.
 
-Elementi UI core per costruire interfacce:
+- **LayoutComponent**: Main wrapper with header, sidebar, and content
+- **HeaderComponent**: Sticky header with logo, navigation, and actions
+- **SidebarComponent**: Responsive sidebar with navigation
+- **NavItemComponent**: Navigation items with icons and badges
+- **NavGroupComponent**: Grouped navigation with titles
 
-**Display & Feedback**
+```erb
+<%= render BetterUi::Drawer::LayoutComponent.new do |layout| %>
+  <% layout.with_header do |header| %>
+    <% header.with_logo { "MyApp" } %>
+  <% end %>
+  <% layout.with_sidebar do |sidebar| %>
+    <% sidebar.with_navigation do %>
+      <%= render BetterUi::Drawer::NavGroupComponent.new(title: "Menu") do |group| %>
+        <% group.with_item(label: "Dashboard", href: "/", active: true) %>
+        <% group.with_item(label: "Settings", href: "/settings") %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% layout.with_main { yield } %>
+<% end %>
+```
 
-- **Alert**: Messaggi di notifica con temi multipli e opzioni dismissible
-- **Avatar**: Immagini profilo utente con supporto fallback
-- **Badge**: Indicatori di stato e etichette
-- **Progress**: Barre di progresso e indicatori di caricamento
-- **Spinner**: Animazioni di caricamento
-- **Tooltip**: Overlay di aiuto contestuale e informazioni
+### Form Builder Integration
 
-**Navigazione & Struttura**
+BetterUi includes a custom form builder for seamless Rails form integration:
 
-- **Breadcrumb**: Indicatori di percorso di navigazione
-- **Divider**: Separatori di contenuto visivi
-- **Heading**: Intestazioni con tipografia consistente
-- **Icon**: Sistema icone SVG con libreria estesa
-- **Link**: Elementi anchor potenziati con supporto theme
-- **Panel**: Sezioni di contenuto organizzate
-- **Table**: Tabelle dati con sorting e funzionalità responsive
-- **Tag**: Elementi di categorizzazione ed etichettatura
+```erb
+<%= form_with model: @user, builder: BetterUi::UiFormBuilder do |f| %>
+  <%= f.ui_text_input :name %>
+  <%= f.ui_text_input :email, hint: "We'll never share your email" %>
+  <%= f.ui_password_input :password %>
+  <%= f.ui_textarea :bio, rows: 6 %>
+  <%= f.ui_number_input :age, min: 0, max: 120 %>
+  <%= f.bui_checkbox :newsletter, label: "Subscribe to newsletter" %>
+  <%= f.bui_checkbox_group :roles, [["Admin", "admin"], ["Editor", "editor"]] %>
+<% end %>
+```
 
-**Form & Input**
+## Documentation
 
-- **Button**: Button azione con varianti multiple e stati
-- **Field**: Wrapper campo form con supporto label e validazione
-- **Input**: Sistema input unificato che supporta 14+ tipi:
-  - **Text**: text, email, password, search, url, tel
-  - **Number**: number, range
-  - **Date/Time**: date, datetime-local, time, month, week
-  - **File**: upload file
-  - **Color**: color picker
-  - **Checkbox**: Opzioni multi-selezione
-  - **Radio**: Opzioni selezione singola
-  - **Select**: Selezioni dropdown
-  - **Textarea**: Input testo multi-riga
+- [**Installation Guide**](doc/INSTALLATION.md) - Detailed setup and configuration instructions
+- [**Component API Reference**](doc/COMPONENTS.md) - Complete component documentation with examples
+- [**Customization Guide**](doc/CUSTOMIZATION.md) - Theme customization and extending components
+- [**Changelog**](CHANGELOG.md) - Version history and release notes
 
-### Componenti Form (0)
+## Development Setup
 
-Riservati per futuri componenti form specializzati e widget form complessi.
+For development and testing, BetterUi includes a dummy Rails application:
 
-## Personalizzazione e Styling
+```bash
+# Clone the repository
+git clone https://github.com/umbertopeserico/better_ui.git
+cd better_ui
 
-I componenti BetterUI usano classi Tailwind CSS. Puoi:
+# Install dependencies
+bundle install
 
-1. **Sovrascrivere classi**: Passa classi personalizzate tramite il parametro `classes`
-2. **Estendere componenti**: Crea i tuoi componenti che ereditano da BetterUI
-3. **Personalizzazione theme**: Modifica la configurazione Tailwind per tematizzazione consistente
+# Run tests
+bundle exec rake test
 
-```erb
-<!-- Aggiungi classi personalizzate -->
-<%= render BetterUi::General::Button::Component.new(
-  label: "Button Personalizzato",
-  classes: "my-custom-class hover:scale-105"
-) %>
+# Start the dummy app server
+cd test/dummy
+bundle exec rails server
 ```
 
-Better UI è progettato per essere altamente personalizzabile mantenendo consistenza:
+Visit `http://localhost:3000` to see the components in action.
 
-1. **Personalizzazione Theme**: Modifica le costanti dei componenti per cambiare lo styling di default
-2. **Configurazione Componenti**: Configura opzioni di default in `config/initializers/better_ui.rb`
-3. **Integrazione TailwindCSS**: Tutto lo styling usa classi TailwindCSS per massima flessibilità
-4. **Estensioni Componenti**: Estendi componenti esistenti o crea i tuoi seguendo i pattern stabiliti
+### Running Tests
 
-## Testing
+```bash
+# Run all tests
+bundle exec rake test
 
-I componenti Better UI sono testati completamente. Puoi eseguire la test suite con:
+# Run specific test file
+bundle exec ruby -Itest test/components/better_ui/button_component_test.rb
 
-```bash
-bin/rails test
+# Run with coverage
+COVERAGE=true bundle exec rake test
 ```
 
-## Supporto Browser
+### Code Style
 
-I componenti BetterUI supportano tutti i browser moderni che supportano:
+BetterUi follows Omakase Ruby styling via `rubocop-rails-omakase`:
 
-- CSS Grid e Flexbox
-- Funzionalità JavaScript ES6+
-- Tailwind CSS
+```bash
+# Run linter
+bundle exec rubocop
+
+# Auto-fix issues
+bundle exec rubocop -a
+```
 
 ## Contributing
 
-1. Forka il repository
-2. Crea il tuo branch feature (`git checkout -b feature/componente-fantastico`)
-3. Aggiungi il tuo componente con test e preview Lookbook
-4. Committa le tue modifiche (`git commit -am 'Aggiungi componente fantastico'`)
-5. Pusha al branch (`git push origin feature/componente-fantastico`)
-6. Crea una Pull Request
+We welcome contributions! Please follow these guidelines:
 
-### Setup Development
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Write tests for your changes
+4. Ensure all tests pass and code follows style guide
+5. Commit your changes with conventional commits (`feat: add amazing feature`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
 
-```bash
-git clone https://github.com/alessiobussolari/better_ui.git
-cd better_ui
-bundle install
-cd test/dummy
-bundle exec rails server
-```
+### Contribution Areas
 
-Visita `http://localhost:3000/lookbook` per vedere la documentazione dei componenti.
+- New components
+- Component enhancements
+- Documentation improvements
+- Bug fixes
+- Performance optimizations
+- Accessibility improvements
 
-## Roadmap
+## Support
+
+For bug reports and feature requests, please use the [GitHub Issues](https://github.com/umbertopeserico/better_ui/issues) page.
 
-- 🎯 Componenti form avanzati (input complessi, validazioni)
-- 📊 Componenti chart e visualizzazione dati
-- 🎭 Componenti animazione e transizione
-- 🌙 Supporto dark mode
-- 📱 Componenti specifici mobile
-- 🔧 Tool di configurazione e generatori
+For questions and discussions, use the [GitHub Discussions](https://github.com/umbertopeserico/better_ui/discussions) forum.
 
 ## License
 
-La gem è disponibile come open source sotto i termini della [MIT License](https://opensource.org/licenses/MIT).
+BetterUi is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-## Support
+## Credits
+
+Built with ❤️ by [Umberto Peserico](https://github.com/umbertopeserico) and contributors.
 
-- 📖 [Documentazione](https://github.com/alessiobussolari/better_ui)
-- 🐛 [Issue Tracker](https://github.com/alessiobussolari/better_ui/issues)
-- 💬 [Discussioni](https://github.com/alessiobussolari/better_ui/discussions)
+Powered by:
+- [ViewComponent](https://viewcomponent.org/) - GitHub's component framework for Rails
+- [Tailwind CSS](https://tailwindcss.com/) - A utility-first CSS framework
+- [Stimulus](https://stimulus.hotwired.dev/) - A modest JavaScript framework for Rails
 
----
+## Acknowledgments
 
-Costruito con ❤️ da [PanDev](https://github.com/alessiobussolari)
+Special thanks to the Ruby on Rails community and all contributors who help make BetterUi better.

data/Rakefile

@@ -3,6 +3,15 @@ require "bundler/setup"
 APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
 load "rails/tasks/engine.rake"
 
-load "rails/tasks/statistics.rake"
-
 require "bundler/gem_tasks"
+
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.pattern = "test/**/*_test.rb"
+  t.verbose = false
+  t.warning = false
+end
+
+task default: :test

data/app/components/better_ui/action_messages_component/action_messages_component.html.erb

@@ -0,0 +1,48 @@
+<%# ActionMessages Component Template
+    Displays a list of messages with optional title, icon, and dismiss button.
+    Supports auto-dismiss via Stimulus controller.
+%>
+
+<%# Main container with Stimulus controller and dynamic classes %>
+<div <%= tag.attributes(component_attributes) %> class="<%= component_classes %>">
+
+  <%# Optional title/heading above messages %>
+  <% if title.present? %>
+    <div class="<%= title_classes %>">
+      <%= title %>
+    </div>
+  <% end %>
+
+  <%# Content wrapper for icon (slot) and message list %>
+  <div class="<%= content_wrapper_classes %>">
+
+    <%# Optional icon slot - pass content via block %>
+    <% if content.present? %>
+      <div class="flex-shrink-0">
+        <%= content %>
+      </div>
+    <% end %>
+
+    <%# Message list - only render if messages exist %>
+    <% if messages.any? %>
+      <ul class="<%= list_classes %>">
+        <% messages.each do |message| %>
+          <li class="<%= list_item_classes %>"><%= message %></li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+
+  <%# Optional dismiss button - triggers Stimulus dismiss action %>
+  <% if dismissible %>
+    <button type="button"
+            data-action="click->better-ui--action-messages#dismiss"
+            class="<%= dismiss_button_classes %>"
+            aria-label="Dismiss">
+      <%# X icon SVG %>
+      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+      </svg>
+    </button>
+  <% end %>
+</div>