better_ui 0.1.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6522f1369534716a8fe823429de29dad169ad4218482f5b3862b55f4f540831
-  data.tar.gz: 58ffe37cb7d9f769727b46430684b50d0ddbd1254e6b67838a3e5ba52d3a387a
+  metadata.gz: 9f8b92fdba76f5e84f09fb6a3bf9879b209e0e7dfd8f864186784db24b808c59
+  data.tar.gz: 4d21e971baeecb10c7a3c5952041ac7e6911342e0efe4d0015efb92f9f214652
 SHA512:
-  metadata.gz: 9c3190b2940333413e85612676ab048b9c06a24a8138f99b202704cfc9799985386c03a37cb9485a7d57e2ca679ac1bd52535292d5ecaa36930667e5427404af
-  data.tar.gz: f11573aa7341a77d293c2af1f1ff602cb9a7eaf494767175b93459b25cbdb4a0008eacff85f2d25d8c3bacedbb99800c6fb5ef74e28ec412ac8576c8b1ac184d
+  metadata.gz: 778ee8d067130b37947a227ccf1322e8cf5b82d19c9b3f7a0371cc16b62071daaeb5eb6a191898ef2b06419486fe656bc22bea4314fbf98884fdf16259ac8409
+  data.tar.gz: 1df545b428bdb281fb6f78b7be2e58e455bd6bd67f0202684f51b9e756c9ccc3e928a283f97d98a924185e1bb859b63f8cf2a91857ef49478cf6bfc3f254629d

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

@@ -1,10 +1,21 @@
-<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">
+  
+  <!-- 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 +31,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 +79,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 +92,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| %>
@@ -187,4 +212,16 @@
       <% 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,10 @@ 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 e bui_button
         include BetterUi::General::Components::Icon::IconHelper
         include BetterUi::General::Components::Avatar::AvatarHelper
+        include BetterUi::General::Components::Button::ButtonHelper
         attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
 
         # Larghezze sidebar con classi Tailwind dirette
@@ -74,7 +75,7 @@ module BetterUi
         end
 
         def container_classes
-          base_classes = %w[fixed inset-y-0 z-50 flex flex-col overflow-y-auto]
+          base_classes = %w[fixed inset-y-0 h-screen z-50 flex flex-col]
 
           # Posizione
           base_classes << (position == :right ? "right-0" : "left-0")

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,7 +2,7 @@
 <% 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<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -10,7 +10,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,7 +18,7 @@
 <% 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<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -26,7 +26,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>

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

@@ -0,0 +1,25 @@
+<div class="relative inline-block <%= @classes %>" 
+     data-controller="bui-dropdown" 
+     data-bui-dropdown-open-value="false"
+     <%= tag.attributes(@html_options.except(:class)) %>>
+  
+  <button type="button"
+          class="inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %>"
+          data-bui-dropdown-target="trigger"
+          data-action="click->bui-dropdown#toggle keydown->bui-dropdown#keydown"
+          aria-expanded="false"
+          aria-haspopup="true">
+    <%= @trigger %>
+    <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
+  </button>
+
+  <div class="absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %>"
+       data-bui-dropdown-target="menu"
+       role="menu"
+       aria-orientation="vertical"
+       style="display: none;">
+    <div class="py-1" role="none" data-action="click->bui-dropdown#itemClick">
+      <%= content %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,170 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Dropdown
+      class Component < ViewComponent::Base
+        include BetterUi::General::Components::Icon::IconHelper
+        
+        attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
+
+        # Classi base spostate nel template HTML per migliore leggibilità
+
+        # Temi per il trigger del dropdown con classi Tailwind dirette
+        DROPDOWN_TRIGGER_THEME = {
+          default: "bg-white border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-blue-500",
+          white: "bg-white border-gray-300 text-gray-900 hover:bg-gray-50 focus:ring-gray-500",
+          red: "bg-red-600 border-red-600 text-white hover:bg-red-700 focus:ring-red-500",
+          rose: "bg-rose-600 border-rose-600 text-white hover:bg-rose-700 focus:ring-rose-500",
+          orange: "bg-orange-600 border-orange-600 text-white hover:bg-orange-700 focus:ring-orange-500",
+          green: "bg-green-600 border-green-600 text-white hover:bg-green-700 focus:ring-green-500",
+          blue: "bg-blue-600 border-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",
+          yellow: "bg-yellow-500 border-yellow-500 text-white hover:bg-yellow-600 focus:ring-yellow-500",
+          violet: "bg-violet-600 border-violet-600 text-white hover:bg-violet-700 focus:ring-violet-500"
+        }.freeze
+
+        # Dimensioni del trigger con classi Tailwind dirette
+        DROPDOWN_TRIGGER_SIZE = {
+          small: "px-3 py-1.5 text-sm",
+          medium: "px-4 py-2 text-sm",
+          large: "px-6 py-3 text-base"
+        }.freeze
+
+        # Border radius con classi Tailwind dirette
+        DROPDOWN_ROUNDED = {
+          none: "rounded-none",
+          small: "rounded-md",
+          medium: "rounded-lg",
+          large: "rounded-xl",
+          full: "rounded-full"
+        }.freeze
+
+        # Posizioni del menu dropdown
+        DROPDOWN_POSITION = {
+          bottom: "top-full left-0",
+          top: "bottom-full left-0",
+          left: "top-0 right-full mr-2",
+          right: "top-0 left-full ml-2"
+        }.freeze
+
+        # Animazioni del dropdown
+        DROPDOWN_ANIMATION = {
+          fade: "transition-opacity duration-150",
+          slide: "transition-all duration-150 transform",
+          none: ""
+        }.freeze
+
+        def initialize(
+          trigger:,
+          position: :bottom,
+          theme: :default,
+          size: :medium,
+          rounded: :medium,
+          animation: :fade,
+          classes: nil,
+          **html_options
+        )
+          @trigger = trigger
+          @position = position.to_sym
+          @theme = theme.to_sym
+          @size = size.to_sym
+          @rounded = rounded.to_sym
+          @animation = animation.to_sym
+          @classes = classes
+          @html_options = html_options
+
+          validate_params
+        end
+
+        # Restituisce solo le classi dinamiche per il trigger
+        def dynamic_trigger_classes
+          [
+            get_trigger_theme_classes,
+            get_trigger_size_classes,
+            get_trigger_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Restituisce solo le classi dinamiche per il menu
+        def dynamic_menu_classes
+          [
+            get_position_classes,
+            get_animation_classes,
+            get_menu_rounded_classes
+          ].compact.join(" ")
+        end
+
+        # Metodi per attributi rimossi - ora gestiti direttamente nel template HTML
+
+        # Verifica se rendere il componente
+        def render?
+          @trigger.present?
+        end
+
+        private
+
+        def get_trigger_theme_classes
+          DROPDOWN_TRIGGER_THEME[@theme] || DROPDOWN_TRIGGER_THEME[:default]
+        end
+
+        def get_trigger_size_classes
+          DROPDOWN_TRIGGER_SIZE[@size] || DROPDOWN_TRIGGER_SIZE[:medium]
+        end
+
+        def get_trigger_rounded_classes
+          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
+        end
+
+        def get_menu_rounded_classes
+          DROPDOWN_ROUNDED[@rounded] || DROPDOWN_ROUNDED[:medium]
+        end
+
+        def get_position_classes
+          DROPDOWN_POSITION[@position] || DROPDOWN_POSITION[:bottom]
+        end
+
+        def get_animation_classes
+          DROPDOWN_ANIMATION[@animation] || DROPDOWN_ANIMATION[:fade]
+        end
+
+        def validate_params
+          validate_theme
+          validate_size
+          validate_rounded
+          validate_position
+          validate_animation
+        end
+
+        def validate_theme
+          unless DROPDOWN_TRIGGER_THEME.keys.include?(@theme)
+            raise ArgumentError, "Il tema deve essere uno tra: #{DROPDOWN_TRIGGER_THEME.keys.join(', ')}"
+          end
+        end
+
+        def validate_size
+          unless DROPDOWN_TRIGGER_SIZE.keys.include?(@size)
+            raise ArgumentError, "La dimensione deve essere una tra: #{DROPDOWN_TRIGGER_SIZE.keys.join(', ')}"
+          end
+        end
+
+        def validate_rounded
+          unless DROPDOWN_ROUNDED.keys.include?(@rounded)
+            raise ArgumentError, "Il border radius deve essere uno tra: #{DROPDOWN_ROUNDED.keys.join(', ')}"
+          end
+        end
+
+        def validate_position
+          unless DROPDOWN_POSITION.keys.include?(@position)
+            raise ArgumentError, "La posizione deve essere una tra: #{DROPDOWN_POSITION.keys.join(', ')}"
+          end
+        end
+
+        def validate_animation
+          unless DROPDOWN_ANIMATION.keys.include?(@animation)
+            raise ArgumentError, "L'animazione deve essere una tra: #{DROPDOWN_ANIMATION.keys.join(', ')}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/dropdown/divider_component.html.erb

@@ -0,0 +1 @@
+<div <%= tag.attributes(divider_attributes) %>></div>