better_ui 0.2.0 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b6dbaeb8dede2be21e4bcff93ba5a7793a08f9e84521c2b46bd8e879be6d072
-  data.tar.gz: b9f58c90c95a748e694018c85aff6ceeb23ecee0f155b8cb45d9b64dc78da2e1
+  metadata.gz: d5ce58a483a9db3c7164c77c50c5206f83304c2b52f6ebff2d92dbc2ddfe0c78
+  data.tar.gz: 262e9f1b61ccf46254e582c2466cf4fea4c89d6ec48cb1117cb63355996a3e2c
 SHA512:
-  metadata.gz: 7bba346a1d310e3869a232212c8708bbff5ef18f048d9361acc895efa78709b6de1e78bfee44dc3b30db77daf3cf380093331d1443b90d0bb6c18a7ad5d9e2e3
-  data.tar.gz: be0e614d6d37d86946d7908e8f2ae0ff83a452dcfc7fc1dd29c42560f77a368bab654e556e767e2d06dcf26236281b9f39987221f0bbee451ff7a16d1125cf39
+  metadata.gz: 9d024e430e9eb3d69c30adc09b8cff4a8a79a3585ea0769abe0e279c7dcb54b36faf7239ad393436f5558dc0db67c29a66e7eac8f32a11232d12cffbffc2cb96
+  data.tar.gz: 4c18bd0f1df604a289bab875eee931283616cd22f7b1a24e239446643392228a09b92f0e9b54888b9c3d8bdc2074a089ff0d35373aca0e60bccda86ef7b843fe

data/app/components/better_ui/application/main/component.html.erb

@@ -1,4 +1,4 @@
-<main class="w-full fixed <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
+<main class="w-full <%= get_layout_class %> <%= get_padding_class(padding) %><%= classes ? ' ' + classes : '' %>">
   <div class="h-[calc(100vh-81px)] p-4">
     <div class="h-full w-full bg-white p-4 <%= get_padding_class(inner_padding) %> <%= get_rounded_class %> <%= get_shadow_class %> overflow-y-auto">
       <div class="h-full overflow-y-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">

data/app/components/better_ui/application/sidebar/component.html.erb

@@ -1,10 +1,22 @@
-<aside class="<%= container_classes %>">
+<div data-controller="bui-sidebar" 
+     data-bui-sidebar-width-value="<%= @width == :md ? 256 : 320 %>"
+     data-bui-sidebar-min-width-value="200"
+     data-bui-sidebar-max-width-value="400"
+     data-bui-sidebar-pinned-value="true"
+     class="<%= wrapper_classes %>">
+  
+  <!-- Mobile Overlay -->
+  <div data-bui-sidebar-target="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
+  
+  <!-- Sidebar Container -->
+  <aside data-bui-sidebar-target="container" class="<%= container_classes %>">
   <!-- Header Section -->
   <% if has_header? %>
     <div class="px-6 py-4 border-b border-gray-200">
-      <% if header[:logo].present? %>
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
+      <div class="flex items-center justify-between">
+        <% if header[:logo].present? %>
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
             <% if header[:logo].is_a?(Hash) %>
               <%= bui_avatar(**header[:logo]) %>
             <% else %>
@@ -20,19 +32,30 @@
             </div>
           <% end %>
         </div>
-      <% elsif header[:title].present? %>
-        <div>
-          <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
-          <% if header[:subtitle].present? %>
-            <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
-          <% end %>
-        </div>
-      <% end %>
+        <% elsif header[:title].present? %>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+            <% if header[:subtitle].present? %>
+              <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+            <% end %>
+          </div>
+        <% end %>
+        
+        <!-- Collapse Button (solo se collapsible) -->
+        <% if collapsible %>
+          <%= bui_button(
+            icon: "arrow-left",
+            type: :white,
+            size: :small,
+            title: "Comprimi sidebar"
+          ) %>
+        <% end %>
+      </div>
     </div>
   <% end %>
 
   <!-- Navigation Section -->
-  <nav class="flex-1 px-4 py-6 space-y-6">
+  <nav class="flex-1 px-4 py-6 space-y-6 overflow-y-auto">
     <% navigation_sections.each do |section| %>
       <div class="space-y-2">
         <!-- Section Title -->
@@ -57,7 +80,9 @@
                 <button 
                   type="button" 
                   class="group flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150"
-                  data-collapse-target="#<%= item[:id] %>"
+                  data-bui-sidebar-target="sectionTrigger"
+                  data-bui-sidebar-section-id="<%= item[:id] %>"
+                  data-action="click->bui-sidebar#toggleSection"
                   aria-expanded="<%= item[:expanded] || false %>"
                 >
                   <div class="flex items-center">
@@ -68,13 +93,14 @@
                     <% end %>
                     <span><%= item[:label] %></span>
                   </div>
-                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>">
+                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>" data-bui-sidebar-chevron>
                     <%= bui_icon("chevron-right", size: :small) %>
                   </span>
                 </button>
                 
                 <div 
-                  id="<%= item[:id] %>" 
+                  data-bui-sidebar-target="sectionContent"
+                  data-bui-sidebar-section-id="<%= item[:id] %>"
                   class="<%= item[:expanded] ? 'block' : 'hidden' %> mt-1 space-y-1"
                 >
                   <% (item[:children] || []).each do |child| %>
@@ -149,7 +175,28 @@
   <!-- Footer Section -->
   <% if has_footer? %>
     <div class="px-6 py-4 border-t border-gray-200">
-      <% if footer[:user_info].present? %>
+      <% if has_user_dropdown? %>
+        <!-- User Dropdown -->
+        <% user_dropdown = footer[:user_dropdown] %>
+        <%= bui_dropdown(
+          trigger: user_dropdown_trigger,
+          position: :top,
+          theme: :white,
+          fullwidth: true,
+          show_chevron: false
+        ) do %>
+          <% (user_dropdown[:menu_items] || []).each do |item| %>
+            <%= bui_dropdown_item(
+              text: item[:text],
+              icon: item[:icon],
+              href: item[:href],
+              theme: item[:theme] || :default,
+              active: item[:active] || false,
+              disabled: item[:disabled] || false
+            ) %>
+          <% end %>
+        <% end %>
+      <% elsif footer[:user_info].present? %>
         <div class="flex items-center">
           <% if footer[:user_info][:avatar].present? %>
             <div class="flex-shrink-0">
@@ -181,10 +228,22 @@
       <% end %>
       
       <% if footer[:content].present? %>
-        <div class="<%= footer[:user_info].present? ? 'mt-4' : '' %>">
+        <div class="<%= (footer[:user_info].present? || has_user_dropdown?) ? 'mt-4' : '' %>">
           <%= footer[:content] %>
         </div>
       <% end %>
     </div>
   <% end %>
+  
+  <!-- Resize Handle (solo se NON collapsible) -->
+  <% unless collapsible %>
+    <div data-bui-sidebar-target="resizeHandle" 
+         class="absolute top-0 right-0 w-1 h-full bg-transparent hover:bg-blue-500 cursor-col-resize transition-colors duration-150 group">
+      <div class="absolute inset-y-0 -right-1 w-3 flex items-center justify-center">
+        <div class="w-0.5 h-8 bg-gray-300 group-hover:bg-blue-500 transition-colors duration-150"></div>
+      </div>
+    </div>
+  <% end %>
 </aside>
+
+</div>

data/app/components/better_ui/application/sidebar/component.rb

@@ -4,9 +4,12 @@ module BetterUi
   module Application
     module Sidebar
       class Component < ViewComponent::Base
-        # Include degli helper per utilizzare bui_icon e bui_avatar
+        # Include degli helper per utilizzare bui_icon, bui_avatar, bui_button e bui_dropdown
         include BetterUi::General::Components::Icon::IconHelper
         include BetterUi::General::Components::Avatar::AvatarHelper
+        include BetterUi::General::Components::Button::ButtonHelper
+        include BetterUi::General::Components::Dropdown::DropdownHelper
+        include BetterUi::General::Components::Dropdown::ItemHelper
         attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
 
         # Larghezze sidebar con classi Tailwind dirette
@@ -45,7 +48,7 @@ module BetterUi
         # @param shadow [Symbol] Tipo di ombra (:none, :sm, :md, :lg), default :lg
         # @param border [Boolean] Se mostrare il bordo destro/sinistro, default true
         # @param header [Hash] Configurazione header (logo, title, subtitle)
-        # @param footer [Hash] Configurazione footer (content, user_info)
+        # @param footer [Hash] Configurazione footer (content, user_info, user_dropdown)
         # @param navigation_sections [Array] Array di sezioni di navigazione
         # @param collapsible [Boolean] Se abilitare sezioni collassabili, default true
         # @param classes [String] Classi CSS aggiuntive
@@ -73,8 +76,8 @@ module BetterUi
           @classes = classes
         end
 
-        def container_classes
-          base_classes = %w[fixed inset-y-0 z-50 flex flex-col overflow-y-auto]
+        def wrapper_classes
+          base_classes = %w[fixed top-0 inset-y-0 h-screen z-[9999]]
 
           # Posizione
           base_classes << (position == :right ? "right-0" : "left-0")
@@ -82,6 +85,12 @@ module BetterUi
           # Larghezza
           base_classes << width_class
 
+          base_classes.compact.join(" ")
+        end
+
+        def container_classes
+          base_classes = %w[flex flex-col h-full]
+
           # Tema
           base_classes.concat(theme_classes)
 
@@ -103,7 +112,56 @@ module BetterUi
         end
 
         def has_footer?
-          footer.present? && (footer[:content].present? || footer[:user_info].present?)
+          footer.present? && (footer[:content].present? || footer[:user_info].present? || footer[:user_dropdown].present?)
+        end
+
+        def has_user_dropdown?
+          footer.present? && footer[:user_dropdown].present?
+        end
+
+        def user_dropdown_trigger
+          return '' unless has_user_dropdown?
+          
+          user_dropdown = footer[:user_dropdown]
+          avatar_html = if user_dropdown[:avatar].present?
+            if user_dropdown[:avatar].is_a?(Hash)
+              bui_avatar(**user_dropdown[:avatar])
+            else
+              user_dropdown[:avatar].html_safe
+            end
+          else
+            ''
+          end
+
+          content_tag(:div, class: "flex items-center w-full text-left") do
+            avatar_section = if user_dropdown[:avatar].present?
+              content_tag(:div, avatar_html, class: "flex-shrink-0")
+            else
+              ''
+            end
+
+            text_section = content_tag(:div, class: user_dropdown[:avatar].present? ? 'ml-3 min-w-0 flex-1' : 'min-w-0 flex-1') do
+              name_part = if user_dropdown[:name].present?
+                content_tag(:p, user_dropdown[:name], class: "text-sm font-medium text-gray-700 truncate")
+              else
+                ''
+              end
+
+              subtitle_part = if user_dropdown[:subtitle].present?
+                content_tag(:p, user_dropdown[:subtitle], class: "text-xs text-gray-500 truncate")
+              else
+                ''
+              end
+
+              (name_part + subtitle_part).html_safe
+            end
+
+            chevron_section = content_tag(:div, class: "ml-auto flex-shrink-0") do
+              bui_icon("chevron-down", size: :small, classes: "text-gray-400")
+            end
+
+            (avatar_section + text_section + chevron_section).html_safe
+          end
         end
 
         private

data/app/components/better_ui/general/accordion/component.html.erb

@@ -0,0 +1,5 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+</div>

data/app/components/better_ui/general/accordion/component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Accordion
+      class Component < ViewComponent::Base
+        renders_many :items, "BetterUi::General::Accordion::ItemComponent"
+
+        ACCORDION_THEME = {
+          default: 'border-gray-200',
+          white: 'border-gray-100 bg-white',
+          blue: 'border-blue-200',
+          red: 'border-red-200',
+          green: 'border-green-200',
+          yellow: 'border-yellow-200',
+          violet: 'border-violet-200',
+          orange: 'border-orange-200',
+          rose: 'border-rose-200'
+        }.freeze
+
+        ACCORDION_VARIANT = {
+          minimal: '',
+          bordered: 'border rounded-lg',
+          separated: 'space-y-2'
+        }.freeze
+
+        ACCORDION_SIZE = {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }.freeze
+
+        def initialize(multiple: false, theme: :default, variant: :bordered, size: :medium, 
+                      classes: '', **options)
+          @multiple = multiple
+          @theme = theme
+          @variant = variant
+          @size = size
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :multiple, :theme, :variant, :size, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_variant
+          validate_size
+        end
+
+        def validate_theme
+          return if ACCORDION_THEME.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{ACCORDION_THEME.keys}"
+        end
+
+        def validate_variant
+          return if ACCORDION_VARIANT.key?(variant)
+
+          raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{ACCORDION_VARIANT.keys}"
+        end
+
+        def validate_size
+          return if ACCORDION_SIZE.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{ACCORDION_SIZE.keys}"
+        end
+
+        # Attributi per il wrapper principale
+        def wrapper_attributes
+          base_classes = [
+            'bui-accordion',
+            ACCORDION_SIZE[size],
+            ACCORDION_VARIANT[variant],
+            ACCORDION_THEME[theme],
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-controller': 'bui-accordion',
+            'data-bui-accordion-multiple-value': multiple
+          }.merge(options)
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/accordion/item_component.html.erb

@@ -0,0 +1,12 @@
+<div <%= tag.attributes(item_attributes) %>>
+  <!-- Header -->
+  <button <%= tag.attributes(header_attributes) %>>
+    <span><%= title %></span>
+    <i class="fas fa-<%= icon %> <%= icon_attributes[:class] %>" <%= tag.attributes(icon_attributes.except(:class)) %>></i>
+  </button>
+  
+  <!-- Content -->
+  <div <%= tag.attributes(content_attributes) %>>
+    <%= content %>
+  </div>
+</div>

data/app/components/better_ui/general/accordion/item_component.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Accordion
+      class ItemComponent < ViewComponent::Base
+        ITEM_THEME = {
+          default: 'border-gray-200 bg-white',
+          white: 'border-gray-100 bg-white',
+          blue: 'border-blue-200 bg-blue-50',
+          red: 'border-red-200 bg-red-50',
+          green: 'border-green-200 bg-green-50',
+          yellow: 'border-yellow-200 bg-yellow-50',
+          violet: 'border-violet-200 bg-violet-50',
+          orange: 'border-orange-200 bg-orange-50',
+          rose: 'border-rose-200 bg-rose-50'
+        }.freeze
+
+        ITEM_HEADER_THEME = {
+          default: 'text-gray-900 hover:bg-gray-50',
+          white: 'text-gray-900 hover:bg-gray-50',
+          blue: 'text-blue-900 hover:bg-blue-100',
+          red: 'text-red-900 hover:bg-red-100',
+          green: 'text-green-900 hover:bg-green-100',
+          yellow: 'text-yellow-900 hover:bg-yellow-100',
+          violet: 'text-violet-900 hover:bg-violet-100',
+          orange: 'text-orange-900 hover:bg-orange-100',
+          rose: 'text-rose-900 hover:bg-rose-100'
+        }.freeze
+
+        ITEM_SIZE_HEADER = {
+          small: 'text-sm px-4 py-3',
+          medium: 'text-base px-5 py-4',
+          large: 'text-lg px-6 py-5'
+        }.freeze
+
+        ITEM_SIZE_CONTENT = {
+          small: 'px-4 py-3',
+          medium: 'px-5 py-4',
+          large: 'px-6 py-5'
+        }.freeze
+
+        ITEM_SIZE_ICON = {
+          small: 'w-4 h-4',
+          medium: 'w-5 h-5',
+          large: 'w-6 h-6'
+        }.freeze
+
+        def initialize(title:, expanded: false, disabled: false, icon: 'chevron-down', 
+                      theme: :default, size: :medium, classes: '', **options)
+          @title = title
+          @expanded = expanded
+          @disabled = disabled
+          @icon = icon
+          @theme = theme
+          @size = size
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :title, :expanded, :disabled, :icon, :theme, :size, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_size
+          
+          raise ArgumentError, 'title cannot be blank' if title.blank?
+        end
+
+        def validate_theme
+          return if ITEM_THEME.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{ITEM_THEME.keys}"
+        end
+
+        def validate_size
+          return if ITEM_SIZE_HEADER.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{ITEM_SIZE_HEADER.keys}"
+        end
+
+        def unique_id
+          @unique_id ||= "accordion-item-#{SecureRandom.hex(4)}"
+        end
+
+        def content_id
+          "#{unique_id}-content"
+        end
+
+        def header_id
+          "#{unique_id}-header"
+        end
+
+        # Attributi per il wrapper dell'item
+        def item_attributes
+          base_classes = [
+            'bui-accordion-item',
+            ITEM_THEME[theme],
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-bui-accordion-target': 'item'
+          }.merge(options)
+        end
+
+        # Attributi per il button header
+        def header_attributes
+          base_classes = [
+            'bui-accordion-header',
+            'w-full flex items-center justify-between text-left font-medium transition-colors duration-200',
+            ITEM_SIZE_HEADER[size],
+            ITEM_HEADER_THEME[theme],
+            disabled? ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            type: 'button',
+            id: header_id,
+            'aria-expanded': expanded,
+            'aria-controls': content_id,
+            'data-action': 'click->bui-accordion#toggle',
+            'data-bui-accordion-target': 'trigger',
+            disabled: disabled
+          }
+        end
+
+        # Attributi per il contenuto
+        def content_attributes
+          base_classes = [
+            'bui-accordion-content',
+            'transition-all duration-300 ease-in-out overflow-hidden',
+            ITEM_SIZE_CONTENT[size],
+            expanded? ? 'block' : 'hidden'
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            id: content_id,
+            'aria-labelledby': header_id,
+            'data-bui-accordion-target': 'content'
+          }
+        end
+
+        # Attributi per l'icona
+        def icon_attributes
+          base_classes = [
+            'bui-accordion-icon',
+            'transition-transform duration-200',
+            ITEM_SIZE_ICON[size],
+            expanded? ? 'rotate-180' : ''
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-bui-accordion-target': 'icon'
+          }
+        end
+
+        def disabled?
+          disabled
+        end
+
+        def expanded?
+          expanded
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/button/component.html.erb

@@ -2,15 +2,15 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
-    <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+    <% if @text %>
+      <span class="flex-grow"><%= @text %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,15 +18,15 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
-    <% if @label %>
-      <span class="flex-grow"><%= @label %></span>
+    <% if @text %>
+      <span class="flex-grow"><%= @text %></span>
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @text.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>

data/app/components/better_ui/general/button/component.rb

@@ -2,7 +2,7 @@ module BetterUi
   module General
     module Button
       class Component < ViewComponent::Base
-        attr_reader :label, :type, :size, :full_width, :disabled,
+        attr_reader :text, :theme, :size, :full_width, :disabled,
                     :icon, :icon_position, :href, :method, :data, :classes, :id, :rounded, :button_type, :html_options
 
         # Classi base sempre presenti
@@ -40,8 +40,8 @@ module BetterUi
 
         # Inizializzazione del componente
         def initialize(
-          label: nil,
-          type: :white,
+          text: nil,
+          theme: :white,
           size: :medium,
           full_width: false,
           disabled: false,
@@ -56,8 +56,8 @@ module BetterUi
           button_type: :button,
           **html_options
         )
-          @label = label
-          @type = type.to_sym
+          @text = text
+          @theme = theme.to_sym
           @size = size.to_sym
           @full_width = full_width
           @disabled = disabled
@@ -95,7 +95,7 @@ module BetterUi
         end
 
         def get_button_type_classes
-          BUTTON_THEME[@type] || BUTTON_THEME[:white]
+          BUTTON_THEME[@theme] || BUTTON_THEME[:white]
         end
 
         def get_border_radius_class
@@ -173,21 +173,21 @@ module BetterUi
 
         # Verifica se rendere il componente
         def render?
-          @label.present? || @icon.present? || content.present?
+          @text.present? || @icon.present? || content.present?
         end
 
         private
 
         def validate_params
-          validate_type
+          validate_theme
           validate_size
           validate_icon_position
           validate_rounded
         end
 
-        def validate_type
-          unless BUTTON_THEME.keys.include?(@type)
-            raise ArgumentError, "Il tipo deve essere uno tra: #{BUTTON_THEME.keys.join(', ')}"
+        def validate_theme
+          unless BUTTON_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{BUTTON_THEME.keys.join(', ')}"
           end
         end