better_ui 0.1.0 → 0.4.0

data/app/components/better_ui/application/sidebar_component.html.erb

@@ -0,0 +1,207 @@
+<%# Overlay per chiudere la sidebar su mobile %>
+<div data-sidebar-target="overlay" data-action="click->sidebar#close" class="<%= overlay_classes %>"></div>
+
+<%# Container principale della sidebar %>
+<div class="<%= container_classes %>" data-sidebar-target="container" <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  <%# Header della sidebar con titolo e pulsante di chiusura (opzionale) %>
+  <% if @title.present? %>
+    <div class="<%= header_classes %>">
+      <% if @title.is_a?(String) %>
+        <div class="flex items-center p-2">
+          <div class="bg-gray-900 rounded-md p-2 mr-2">
+            <svg class="w-5 h-5 text-white" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
+              <path fill-rule="evenodd" d="M4.5 9.75a6 6 0 0111.573-2.226 3.75 3.75 0 014.133 4.303A4.5 4.5 0 0118 20.25H6.75a5.25 5.25 0 01-2.23-10.004 6.072 6.072 0 01-.02-.496z" clip-rule="evenodd"></path>
+            </svg>
+          </div>
+          <div>
+            <h2 class="text-base font-semibold text-gray-900"><%= @title %></h2>
+            <p class="text-sm text-gray-500">Enterprise</p>
+          </div>
+        </div>
+      <% else %>
+        <%= @title.html_safe %>
+      <% end %>
+      
+      <%# Pulsante per chiudere la sidebar su mobile %>
+      <% if @variant != :modern %>
+        <button 
+          type="button" 
+          data-action="sidebar#close" 
+          class="md:hidden ml-auto rounded-lg p-1.5 focus:outline-none focus:ring-2 focus:ring-gray-200"
+          aria-label="Chiudi"
+        >
+          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <%# Menu principale della sidebar %>
+  <div class="flex-grow overflow-y-auto py-3">
+    <nav>
+      <% 
+        current_section = nil
+        @items.each_with_index do |item, index| 
+      %>
+        <% if item[:divider] %>
+          <hr class="<%= divider_classes %>">
+        <% elsif item[:heading] %>
+          <% current_section = item[:heading] %>
+          <div class="<%= section_heading_classes %> uppercase">
+            <%= current_section %>
+          </div>
+        <% else %>
+          <% 
+            # Aggiungi automaticamente l'intestazione della sezione se è il primo elemento e non c'è un'intestazione
+            if index == 0 && !@items.any? { |i| i[:heading].present? }
+              current_section = "PLATFORM"
+          %>
+            <div class="<%= section_heading_classes %> uppercase">
+              <%= current_section %>
+            </div>
+          <% end %>
+          
+          <div>
+            <% if item[:url].present? && !has_children?(item) %>
+              <a 
+                href="<%= item[:url] %>" 
+                class="<%= menu_item_classes(active_item?(item)) %>"
+                <% if item[:target].present? %>target="<%= item[:target] %>"<% end %>
+              >
+                <% if item[:icon].present? %>
+                  <span class="flex-shrink-0 mr-3 text-gray-500 w-5 h-5 flex items-center justify-center">
+                    <% if item[:icon] == "table-cells" %>
+                      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h3v10H5V5zm5 0h10v2H10V5zm0 4h4v6h-4V9zm6 0h4v6h-4V9z" />
+                      </svg>
+                    <% elsif item[:icon] == "book" %>
+                      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                      </svg>
+                    <% elsif item[:icon] == "gear" %>
+                      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      </svg>
+                    <% elsif item[:icon] == "cube" %>
+                      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                      </svg>
+                    <% else %>
+                      <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                    <% end %>
+                  </span>
+                <% end %>
+                <span class="<%= item_label_classes %>"><%= item[:label] %></span>
+                
+                <svg class="w-5 h-5 ml-auto text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                </svg>
+              </a>
+            <% else %>
+              <% dropdown_id = "dropdown-#{SecureRandom.hex(4)}" %>
+              <div class="flex flex-col">
+                <button 
+                  type="button" 
+                  class="<%= menu_item_classes(active_item?(item), false, has_children?(item)) %>" 
+                  data-action="sidebar#toggleSubmenu"
+                  data-sidebar-target="dropdown"
+                  aria-expanded="<%= active_item?(item) ? "true" : "false" %>"
+                  aria-controls="<%= dropdown_id %>"
+                >
+                  <% if item[:icon].present? %>
+                    <span class="flex-shrink-0 mr-3 text-gray-500 w-5 h-5 flex items-center justify-center">
+                      <% if item[:icon] == "table-cells" %>
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h3v10H5V5zm5 0h10v2H10V5zm0 4h4v6h-4V9zm6 0h4v6h-4V9z" />
+                        </svg>
+                      <% elsif item[:icon] == "book" %>
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                        </svg>
+                      <% elsif item[:icon] == "gear" %>
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        </svg>
+                      <% elsif item[:icon] == "cube" %>
+                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+                        </svg>
+                      <% else %>
+                        <%= render BetterUi::General::IconComponent.new(name: item[:icon]) %>
+                      <% end %>
+                    </span>
+                  <% end %>
+                  
+                  <span class="<%= item_label_classes %>"><%= item[:label] %></span>
+                  
+                  <svg class="w-5 h-5 ml-auto text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-sidebar-target="chevron">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+                
+                <% if has_children?(item) %>
+                  <div 
+                    id="<%= dropdown_id %>" 
+                    class="pl-5 <%= active_item?(item) ? "" : "hidden" %>" 
+                    data-sidebar-target="submenu"
+                  >
+                    <% item[:children].each do |child| %>
+                      <a 
+                        href="<%= child[:url] || '#' %>" 
+                        class="block py-2.5 pr-3 text-gray-700 hover:bg-gray-50 hover:text-gray-900"
+                        <% if child[:target].present? %>target="<%= child[:target] %>"<% end %>
+                      >
+                        <%= child[:label] %>
+                      </a>
+                    <% end %>
+                  </div>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </nav>
+  </div>
+  
+  <%# Footer della sidebar (opzionale) %>
+  <% if @footer.present? %>
+    <div class="<%= footer_classes %>">
+      <% if @footer.is_a?(String) %>
+        <%= @footer.html_safe %>
+      <% else %>
+        <%= @footer.html_safe %>
+      <% end %>
+    </div>
+  <% end %>
+  
+  <%# Pulsante per il toggle della sidebar (opzionale) %>
+  <% if @collapsible && @variant != :modern %>
+    <button 
+      type="button" 
+      class="<%= toggle_button_classes %>" 
+      data-action="sidebar#toggle" 
+      data-sidebar-target="toggleButton"
+      aria-label="<%= @position == :left ? 'Espandi/Contrai sidebar' : 'Espandi/Contrai sidebar' %>"
+    >
+      <svg 
+        class="w-4 h-4 transition-transform" 
+        data-sidebar-target="toggleIcon"
+        aria-hidden="true" 
+        xmlns="http://www.w3.org/2000/svg" 
+        fill="none" 
+        viewBox="0 0 24 24"
+      >
+        <% if @position == :left %>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 19l-7-7 7-7"/>
+        <% else %>
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l7-7-7-7"/>
+        <% end %>
+      </svg>
+    </button>
+  <% end %>
+</div> 

data/app/components/better_ui/application/sidebar_component.rb

@@ -0,0 +1,318 @@
+module BetterUi
+  module Application
+    class SidebarComponent < ViewComponent::Base
+      attr_reader :title, :variant, :items, :footer, :classes, :data, :collapsible, :collapsed_default, :position, :width, :overlay_on_mobile
+
+      # Varianti di colore disponibili
+      VARIANTS = {
+        light: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          text: "text-gray-700",
+          active_bg: "bg-gray-50",
+          active_text: "text-gray-900",
+          hover: "hover:bg-gray-50 hover:text-gray-900",
+          divider: "border-gray-200",
+          shadow: "shadow-sm",
+          icon: "text-gray-500",
+          chevron: "text-gray-400",
+          heading: "text-gray-500"
+        },
+        dark: {
+          bg: "bg-gray-800",
+          border: "border-gray-700",
+          text: "text-gray-200",
+          active_bg: "bg-gray-700",
+          active_text: "text-white",
+          hover: "hover:bg-gray-700 hover:text-white",
+          divider: "border-gray-700",
+          shadow: "shadow-lg",
+          icon: "text-gray-400",
+          chevron: "text-gray-500",
+          heading: "text-gray-400"
+        },
+        primary: {
+          bg: "bg-orange-600",
+          border: "border-orange-700",
+          text: "text-white",
+          active_bg: "bg-orange-700",
+          active_text: "text-white",
+          hover: "hover:bg-orange-700",
+          divider: "border-orange-500",
+          shadow: "shadow-lg",
+          icon: "text-orange-300",
+          chevron: "text-orange-400",
+          heading: "text-orange-200"
+        },
+        blue: {
+          bg: "bg-blue-800",
+          border: "border-blue-700",
+          text: "text-gray-100",
+          active_bg: "bg-blue-700",
+          active_text: "text-white",
+          hover: "hover:bg-blue-700 hover:text-white",
+          divider: "border-blue-700",
+          shadow: "shadow-lg",
+          icon: "text-blue-300",
+          chevron: "text-blue-400",
+          heading: "text-blue-200"
+        },
+        modern: {
+          bg: "bg-white",
+          border: "border-gray-200",
+          text: "text-gray-700",
+          active_bg: "bg-gray-100",
+          active_text: "text-gray-900",
+          hover: "hover:bg-gray-50",
+          divider: "border-gray-100",
+          shadow: "shadow-none",
+          icon: "text-gray-500",
+          chevron: "text-gray-400",
+          heading: "text-gray-500 uppercase text-xs font-medium"
+        }
+      }
+
+      # Dimensioni disponibili per la sidebar
+      WIDTHS = {
+        narrow: "w-60",
+        medium: "w-64",
+        wide: "w-72",
+        custom: "" # La larghezza custom viene specificata nelle classi aggiuntive
+      }
+
+      # Posizioni disponibili
+      POSITIONS = {
+        left: "left-0",
+        right: "right-0"
+      }
+
+      # Inizializzazione del componente
+      def initialize(
+        title: nil,
+        variant: :modern,
+        items: [],
+        footer: nil,
+        classes: nil,
+        data: {},
+        collapsible: true,
+        collapsed_default: false,
+        position: :left,
+        width: :narrow,
+        overlay_on_mobile: true
+      )
+        @title = title
+        @variant = variant.to_sym
+        @items = items || []
+        @footer = footer
+        @classes = classes
+        @data = data || {}
+        @collapsible = collapsible
+        @collapsed_default = collapsed_default
+        @position = position.to_sym
+        @width = width.to_sym
+        @overlay_on_mobile = overlay_on_mobile
+
+        # Aggiungiamo controller Stimulus per la gestione della sidebar
+        @data[:controller] = "sidebar" if @data[:controller].blank?
+        @data[:sidebar_position_value] = @position.to_s
+        @data[:sidebar_collapsed_value] = @collapsed_default.to_s
+        @data[:sidebar_overlay_on_mobile_value] = @overlay_on_mobile.to_s
+      end
+
+      # Genera le classi per il container della sidebar
+      def container_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        width_class = WIDTHS.fetch(@width, WIDTHS[:narrow])
+        position_class = POSITIONS.fetch(@position, POSITIONS[:left])
+
+        [
+          "h-screen relative z-40",
+          styles[:bg],
+          styles[:border],
+          @position == :left ? "border-r" : "border-l",
+          styles[:shadow],
+          width_class,
+          position_class,
+          @classes,
+          "transition-transform duration-300 ease-in-out transform",
+          "flex flex-col"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'overlay
+      def overlay_classes
+        [
+          "fixed inset-0 bg-black bg-opacity-50 z-30",
+          "transition-opacity duration-300 ease-in-out",
+          "hidden"
+        ].join(" ")
+      end
+
+      # Genera le classi per il pulsante del toggle
+      def toggle_button_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        position_class = @position == :left ? "right-0 -mr-3" : "left-0 -ml-3"
+
+        [
+          "absolute top-16",
+          position_class,
+          "z-50 flex items-center justify-center",
+          "w-6 h-12 rounded-lg",
+          styles[:bg],
+          styles[:border],
+          "cursor-pointer shadow-lg",
+          "transform transition-transform duration-300 ease-in-out"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per l'intestazione
+      def header_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+
+        [
+          "px-4 py-4 flex items-center",
+          @variant == :modern ? "" : "border-b #{styles[:border]}"
+        ].compact.join(" ")
+      end
+
+      # Genera le classi per i link nel menu
+      def menu_item_classes(active = false, nested = false, has_children = false)
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        padding_x = @variant == :modern ? "pl-5 pr-3" : "px-3"
+        padding_y = @variant == :modern ? "py-2.5" : "py-2"
+        rounded = @variant == :modern ? "" : "rounded-md"
+        
+        base_classes = [
+          "flex items-center #{padding_y} #{padding_x} #{rounded} my-0.5 w-full",
+        ]
+        
+        if active
+          active_classes = @variant == :modern ? "bg-gray-100 font-medium" : styles[:active_bg]
+          [
+            *base_classes,
+            active_classes,
+            styles[:active_text],
+          ].join(" ")
+        else
+          [
+            *base_classes,
+            styles[:text],
+            styles[:hover],
+            has_children ? "cursor-pointer" : ""
+          ].join(" ")
+        end
+      end
+
+      # Genera le classi per i separatori
+      def divider_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "my-2 border-t",
+          styles[:divider]
+        ].join(" ")
+      end
+
+      # Genera le classi per il footer
+      def footer_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "mt-auto px-4 py-3",
+          @variant == :modern ? "" : "border-t #{styles[:border]}"
+        ].join(" ")
+      end
+
+      # Genera le classi per le icone
+      def icon_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "mr-3 flex-shrink-0",
+          styles[:icon]
+        ].join(" ")
+      end
+
+      # Genera le classi per la label della voce di menu
+      def item_label_classes
+        [
+          "flex-1 truncate"
+        ].join(" ")
+      end
+
+      # Genera le classi per il badge nella voce di menu
+      def badge_classes(type = :default)
+        badge_types = {
+          default: "bg-gray-200 text-gray-800",
+          primary: "bg-orange-100 text-orange-800",
+          success: "bg-green-100 text-green-800",
+          warning: "bg-yellow-100 text-yellow-800",
+          danger: "bg-red-100 text-red-800",
+          info: "bg-blue-100 text-blue-800"
+        }
+        
+        [
+          "px-2 py-0.5 text-xs rounded-full",
+          badge_types.fetch(type.to_sym, badge_types[:default])
+        ].join(" ")
+      end
+
+      # Genera le classi per il titolo di sezione
+      def section_heading_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        if @variant == :modern
+          "px-5 py-2 text-xs font-medium text-gray-500"
+        else
+          [
+            "px-4 py-2 text-xs tracking-wider",
+            styles[:heading]
+          ].join(" ")
+        end
+      end
+
+      # Genera le classi per icona chevron
+      def chevron_classes
+        styles = VARIANTS.fetch(@variant, VARIANTS[:modern])
+        
+        [
+          "ml-auto",
+          styles[:chevron]
+        ].join(" ")
+      end
+
+      # Verifica se la sidebar deve essere resa
+      def render?
+        true
+      end
+
+      # Determina se un elemento dovrebbe essere considerato attivo
+      def active_item?(item)
+        item[:active] == true
+      end
+
+      # Verifica se un elemento ha figli
+      def has_children?(item)
+        item[:children].present? && item[:children].is_a?(Array) && item[:children].any?
+      end
+
+      # Verifica se un elemento ha un badge
+      def has_badge?(item)
+        item[:badge].present?
+      end
+
+      # Ottiene il tipo di badge per un elemento
+      def badge_type(item)
+        return :default unless item[:badge].is_a?(Hash)
+        (item[:badge][:type] || :default).to_sym
+      end
+
+      # Ottiene il testo del badge per un elemento
+      def badge_text(item)
+        return item[:badge].to_s unless item[:badge].is_a?(Hash)
+        item[:badge][:text].to_s
+      end
+    end
+  end
+end 

data/app/components/better_ui/application/toast_component.html.erb

@@ -0,0 +1,35 @@
+<div role="status" aria-live="polite" class="<%= container_classes %>" 
+  <%= @data&.map { |k, v| "data-#{k}=\"#{v}\"" }&.join(' ')&.html_safe %>>
+  
+  <% if effective_icon.present? %>
+    <div class="<%= icon_classes %>">
+      <%= render BetterUi::General::IconComponent.new(name: effective_icon) %>
+    </div>
+  <% end %>
+  
+  <div class="<%= content_classes %>">
+    <% if @title.present? %>
+      <div class="<%= title_classes %>"><%= @title %></div>
+    <% end %>
+    
+    <% if @message.present? %>
+      <div class="<%= message_classes %>"><%= @message %></div>
+    <% end %>
+    
+    <% if content.present? %>
+      <div class="<%= message_classes %>"><%= content %></div>
+    <% end %>
+    
+    <% if @auto_hide %>
+      <div class="w-full bg-gray-200 h-1 mt-2 rounded overflow-hidden">
+        <div class="bg-current h-1 transition-all" data-toast-target="progressBar"></div>
+      </div>
+    <% end %>
+  </div>
+  
+  <% if @dismissible %>
+    <button type="button" class="<%= close_button_classes %>" data-action="toast#hide" aria-label="Chiudi">
+      <%= render BetterUi::General::IconComponent.new(name: "xmark") %>
+    </button>
+  <% end %>
+</div>