plutonium 0.10.3 → 0.11.1

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.html.erb

@@ -1,72 +1,64 @@
-<% if value.is_a?(String) %>
-<li>
-  <a
-    href="<%= value %>"
-    class="<%= link_button_class %>"
-  >
-    <svg
-      aria-hidden="true"
-      class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-white"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
-      <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-    </svg>
-    <span class="<%= link_label_class %>"><%= name %></span>
-    <% if indicator.present? %>
-    <span class="inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800">
-      <%= indicator %>
-    </span>
-    <% end %>
-  </a>
+<li <%= attributes_html %>>
+  <% if sub_items.any? %>
+    <button
+      type="button"
+      class="<%= link_button_class %> w-full transition duration-75"
+      data-resource-drop-down-target="trigger"
+      aria-controls="dropdown-<%= name.parameterize %>">
+      <% if icon.present? %>
+        <%= render_icon icon, size: :lg %>
+      <% else %>
+        <div class="shrink-0 w-6 h-6">
+          &nbsp;
+        </div>
+      <% end %>
+      <span class="<%= link_label_class %>"><%= name %></span>
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+
+    <ul id="dropdown-<%= name.parameterize %>" data-resource-drop-down-target="menu" class="hidden py-2 space-y-2">
+      <% sub_items.each do |sub_item| %>
+        <%#= sub_item %>
+        <li>
+          <a
+            href="<%= sub_item.url %>"
+            class="<%= sub_link_button_class %>">
+            <%= sub_item.name %>
+          </a>
+        </li>
+      <% end %>
+    </ul>
+  <% else %>
+    <a
+      href="<%= url %>"
+      class="<%= link_button_class %>">
+      <% if icon.present? %>
+        <%= render_icon icon, size: :lg %>
+      <% else %>
+        <div class="shrink-0 w-6 h-6">
+          &nbsp;
+        </div>
+      <% end %>
+      <span class="<%= link_label_class %>"><%= name %></span>
+      <%#
+        <% if indicator.present? % >
+          <span class="inline-flex justify-center items-center w-5 h-5 text-xs font-semibold rounded-full text-primary-800 bg-primary-100 dark:bg-primary-200 dark:text-primary-800">
+            <%= indicator % >
+          </span>
+        <% end % >
+      %>
+    </a>
+  <% end %>
 </li>
-<% else %>
-<li>
-  <button
-    type="button"
-    class="<%= link_button_class %> w-full transition duration-75"
-    aria-controls="dropdown-<%= name.parameterize %>"
-    data-collapse-toggle="dropdown-<%= name.parameterize %>"
-  >
-    <svg
-      aria-hidden="true"
-      class="shrink-0 w-6 h-6 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-200 dark:group-hover:text-white"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-    <span class="<%= link_label_class %>"><%= name %></span>
-    <svg
-      aria-hidden="true"
-      class="w-6 h-6"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-        clip-rule="evenodd"
-      ></path>
-    </svg>
-  </button>
-  <ul id="dropdown-<%= name.parameterize %>" class="hidden py-2 space-y-2">
-    <% value.each do |name, value| %>
-    <li>
-      <a
-        href="<%= value %>"
-        class="<%= sub_link_button_class %>"
-        ><%= name %></a>
-    </li>
-    <% end %>
-  </ul>
-</li>
-<% end %>

data/app/views/components/sidebar_menu_item/sidebar_menu_item_component.rb

@@ -1,23 +1,42 @@
-module Plutonium::Ui
-  class SidebarMenuItemComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class SidebarMenuItemComponent < PlutoniumUi::Base
+    renders_many :sub_items, "::PlutoniumUi::SidebarMenuItemComponent"
+
     option :name
-    option :value
-    option :indicator, optional: true
+    option :url, default: -> { "" }
+    option :options, default: -> { {} }
+    option :icon, optional: true
 
     private
 
+    def base_attributes
+      # base attributes go here
+      {
+        id: "sidebar-menu-item-#{name.parameterize}",
+        classname: "sidebar-menu-item",
+        controller: ["sidebar-menu-item", sub_items.any? ? "resource-drop-down" : nil],
+        link_button_class: "group flex items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700",
+        link_label_class: "flex-1 ml-3 text-left whitespace-nowrap",
+        sub_link_button_class: "flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+      }
+    end
+
+    def filtered_attributes
+      %i[link_button_class link_label_class sub_link_button_class]
+    end
+
     def link_button_class
-      "group flex items-center rounded-lg p-2 text-base font-medium text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+      raw_attributes_hash[:link_button_class]
     end
 
     def link_label_class
-      "flex-1 ml-3 text-left whitespace-nowrap"
+      raw_attributes_hash[:link_label_class]
     end
 
     def sub_link_button_class
-      "flex items-center p-2 pl-11 w-full text-base font-medium text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
+      raw_attributes_hash[:sub_link_button_class]
     end
   end
 end
 
-Plutonium::ComponentRegistry.register :sidebar_menu_item, to: Plutonium::Ui::SidebarMenuItemComponent
+Plutonium::ComponentRegistry.register :sidebar_menu_item, to: PlutoniumUi::SidebarMenuItemComponent

data/app/views/components/skeleton/table/table_component.html.erb

@@ -1,5 +1,5 @@
 
-    <div role="status" class="p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
+    <div role="status" class="p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow motion-safe:animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700">
       <div class="flex items-center justify-between">
         <div>
           <div class="h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5"></div>

data/app/views/components/skeleton/table/table_component.rb

@@ -1,6 +1,6 @@
-module Plutonium::Ui::Skeleton
-  class TableComponent < Plutonium::Ui::Base
+module PlutoniumUi::Skeleton
+  class TableComponent < PlutoniumUi::Base
   end
 end
 
-Plutonium::ComponentRegistry.register :skeleton__table, to: Plutonium::Ui::Skeleton::TableComponent
+Plutonium::ComponentRegistry.register :skeleton__table, to: PlutoniumUi::Skeleton::TableComponent

data/app/views/components/table/table_component.html.erb

@@ -1,92 +1,43 @@
-<% if search_object.scope_definitions.present?  %>
-  <%
-    name = name.to_s
-    current_scope = resource_query_params[:scope]
-  %>
-  <%= render_component :block, rounded: :top do %>
-    <ul class="text-sm font-medium flex flex-wrap -mb-px">
-        <li class="me-2">
-          <% if current_scope.blank? %>
-            <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: nil) %>">All</a>
-          <% else %>
-            <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: nil) %>">All</a>
-          <% end %>
-        </li>
-
-        <% search_object.scope_definitions.each do |name, definition| %>
-          <li class="me-2">
-            <% if name == current_scope %>
-              <a class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 rounded-t-lg active dark:text-primary-500 dark:border-primary-500" aria-current="page" href="?<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
-            <% else %>
-              <a class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 dark:text-gray-500" href="<%= search_object.build_url(scope: name) %>"><%= name.humanize %></a>
-            <% end %>
-          </li>
+<table <%= attributes_html %>>
+  <thead class="<%= table_head_classname %>">
+    <tr>
+      <th scope="col" class="p-4">
+        <div class="flex items-center">
+          <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+          <label for="checkbox-all-search" class="sr-only">checkbox</label>
+        </div>
+      </th>
+      <% @columns.each do |column| %>
+        <th scope="col" class="<%= table_head_cell_classname %>">
+          <%= table_head_cell column  %>
+        </th>
+      <% end %>
+      <% if actions_block.present? %>
+        <th scope="col" class="<%= table_actions_head_classname %>">&nbsp;</th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <% @rows.each do |row| %>
+      <tr class="<%= table_row_classname %>">
+        <th scope="row" class="w-4 p-4">
+          <div class="flex items-center">
+            <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+            <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
+          </div>
+        </th>
+        <% @columns.each do |column| %>
+          <td class="<%= table_row_cell_classname %>">
+            <%# the capture ensures, that we do not only return the return of the block, but all the html from the block %>
+            <%= view_context.capture(row, &column.td_block) %>
+          </td>
         <% end %>
-    </ul>
-  <% end %>
-<% end %>
-
-<%= render_component :block, id: "resource-table-container", scroll: :x, rounded: table_rounding, data: {controller:"scroll-preserver", action: "scroll->scroll-preserver#scrolled"} do %>
-  <% unless resources.any? %>
-    <div class="col-12">
-      <%=
-        render_component :empty_card, message: "No #{resource_name_plural(resource_class).downcase} match your query" do
-          if current_policy.create?
-            render_component :button, label: "Create #{resource_name(resource_class)}",
-                                        to: resource_url_for(resource_class, action: :new),
-                                        color: :primary
-          end
-        end
-      %>
-    </div>
-  <% else %>
-    <table data-controller="table" <%= render_component_attributes %>>
-      <thead class="<%= table_head_classes %>">
-        <tr>
-          <th scope="col" class="p-4">
-            <div class="flex items-center">
-              <input id="checkbox-all-search" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-              <label for="checkbox-all-search" class="sr-only">checkbox</label>
-            </div>
-          </th>
-          <% fields.each do |name, field| %>
-            <th scope="col" class="px-6 py-3">
-              <%= table_header name, field.label, search_object  %>
-            </th>
-          <% end %>
-          <th scope="col" class="px-6 py-3 text-end">&nbsp;</th>
-        </tr>
-      </thead>
-      <tbody>
-        <% resources.each do |resource| %>
-          <tr class="<%= table_row_classes %>">
-            <th scope="row" class="w-4 p-4">
-              <div class="flex items-center">
-                <input id="checkbox-table-search-1" type="checkbox" class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
-                <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
-              </div>
-            </th>
-            <% fields.each do |name, field| %>
-              <%
-                options = field.options
-                max_width = options.delete :pu_max_width
-              %>
-              <td class="<%= table_row_cell_classes %>">
-                <%= field.render self, resource %>
-              </td>
-            <% end %>
-            <td class="<%= table_actions_cell_classes %>">
-              <% record_actions.permitted_for(policy(resource)).values.each do |action| %>
-                <%= table_action_button resource, action %>
-              <% end %>
-            </td>
-          </tr>
+        <% if actions_block.present? %>
+          <td class="<%= table_actions_row_classname %>">
+            <%= view_context.capture(row, &actions_block) %>
+          </td>
         <% end %>
-      </tbody>
-    </table>
-
-    <% if pager.present? %>
-      <%= render_component :pagination, pager: pager %>
+      </tr>
     <% end %>
-  <% end %>
-<% end %>
+  </tbody>
+</table>

data/app/views/components/table/table_component.rb

@@ -1,63 +1,159 @@
-module Plutonium::Ui
-  class TableComponent < Plutonium::Ui::Base
-    option :resource_class
-    option :resources
-    option :record_actions
-    option :search_object
-    option :fields
-    option :pager
+module PlutoniumUi
+  # TableComponent is a UI component that represents a table with sortable columns and optional row actions.
+  class TableComponent < PlutoniumUi::Base
+    option :rows
 
-    def classname
-      "table-auto w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200 #{super}"
+    attr_reader :columns, :actions_block
+
+    # Initializes the TableComponent with the given options.
+    #
+    # @param options [Hash] The options for the component.
+    def initialize(...)
+      super(...)
+      @columns = []
+    end
+
+    # Defines a column in the table.
+    #
+    # @param name [Symbol] The name of the column.
+    # @param label [String] The label of the column.
+    # @param search_object [Object] The search object associated with the column.
+    # @param block [Proc] An optional block for additional column customization.
+    def column(name:, label:, search_object:, &block)
+      @columns ||= []
+      @columns << Column.new(name:, label:, search_object:, &block)
+    end
+
+    # Returns the base attributes for the table.
+    #
+    # @return [Hash] The base attributes hash.
+    def base_attributes
+      {
+        classname: "table-auto w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-200",
+        table_head_classname: "text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-200",
+        table_head_cell_classname: "px-6 py-3",
+        table_row_classname: "bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600",
+        table_row_cell_classname: "px-6 py-4 whitespace-nowrap max-w-[250px] hover:max-w-fit overflow-hidden text-ellipsis",
+        table_actions_head_classname: "px-6 py-3 text-end",
+        table_actions_row_classname: "flex justify-end px-6 py-4"
+      }
+    end
+
+    def filtered_attributes
+      base_attributes.keys - possible_attributes
+    end
+
+    # Defines a block of actions to be included in each row.
+    #
+    # @param block [Proc] The block defining the actions.
+    def with_actions(&block)
+      @actions_block = block
     end
 
     private
 
-    def table_rounding
-      search_object.scope_definitions.present? ? :bottom : :all
+    # Ensures that the view component calls the block, and @columns get populated.
+    def before_render
+      content
     end
 
-    def table_head_classes
-      "text-xs text-gray-700 uppercase bg-gray-200 dark:bg-gray-700 dark:text-gray-200"
+    # Retrieves the CSS class for the table head.
+    #
+    # @return [String] The CSS class for the table head.
+    def table_head_classname
+      raw_attributes_hash[:table_head_classname]
     end
 
-    def table_row_classes
-      "bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"
+    # Retrieves the CSS class for a table head cell.
+    #
+    # @return [String] The CSS class for a table head cell.
+    def table_head_cell_classname
+      raw_attributes_hash[:table_head_cell_classname]
     end
 
-    def table_row_cell_classes
-      "px-6 py-4 whitespace-nowrap max-w-[250px] hover:max-w-fit overflow-hidden text-ellipsis"
+    # Retrieves the CSS class for a table row.
+    #
+    # @return [String] The CSS class for a table row.
+    def table_row_classname
+      raw_attributes_hash[:table_row_classname]
     end
 
-    def table_actions_cell_classes
-      "flex justify-end px-6 py-4"
+    # Retrieves the CSS class for a table row cell.
+    #
+    # @return [String] The CSS class for a table row cell.
+    def table_row_cell_classname
+      raw_attributes_hash[:table_row_cell_classname]
     end
 
-    def table_header(name, label, search_object)
+    # Retrieves the CSS class for the table actions head.
+    #
+    # @return [String] The CSS class for the table actions head.
+    def table_actions_head_classname
+      raw_attributes_hash[:table_actions_head_classname]
+    end
+
+    # Retrieves the CSS class for the table actions row.
+    #
+    # @return [String] The CSS class for the table actions row.
+    def table_actions_row_classname
+      raw_attributes_hash[:table_actions_row_classname]
+    end
+
+    # Generates the content for a table head cell, including sorting links if applicable.
+    #
+    # @param column [Column] The column object.
+    # @return [String] The HTML content for the table head cell.
+    def table_head_cell(column)
+      name = column.name
+      label = column.label
+      search_object = column.search_object
+
       if (sort_params = search_object.sort_params_for(name))
-        tag.span do
+        tag.div class: "inline-flex" do
           concat begin
-            link_to(sort_params[:url], class: "text-decoration-none") do
+            link_to(sort_params[:url], class: "flex", title: sort_params[:direction] || "Sort") do
               concat label
               if sort_params[:direction].present?
                 icon = (sort_params[:direction] == "ASC") ? "up" : "down"
                 concat " "
-                concat tag.i(icon, class: "bi bi-sort-#{icon} text-muted", title: sort_params[:direction])
+                concat render_icon("outline/arrow-#{icon}")
               end
             end
           end
+
           if sort_params[:position].present?
             concat " "
-            concat link_to(sort_params[:position] + 1, sort_params[:reset_url],
-              class: "badge rounded-pill text-bg-secondary text-decoration-none", title: "remove sorting",
-              style: "font-size: 0.6em;")
+            concat link_to(
+              sort_params[:position] + 1,
+              sort_params[:reset_url],
+              class: "inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-yellow-500 border-1 border-white rounded-full dark:border-gray-90",
+              title: "Clear sorting"
+            )
           end
         end
       else
         label
       end
     end
+
+    # A value object to hold the column definition.
+    class Column
+      attr_reader :name, :label, :search_object, :td_block
+
+      # Initializes a Column object with the given attributes.
+      #
+      # @param name [Symbol] The name of the column.
+      # @param label [String] The label of the column.
+      # @param search_object [Object] The search object associated with the column.
+      # @param block [Proc] An optional block for additional column customization.
+      def initialize(name:, label:, search_object:, &block)
+        @name = name
+        @label = label
+        @search_object = search_object
+        @td_block = block
+      end
+    end
   end
 end
 
-Plutonium::ComponentRegistry.register :table, to: Plutonium::Ui::TableComponent
+Plutonium::ComponentRegistry.register :table, to: PlutoniumUi::TableComponent

data/app/views/components/table_search_input/table_search_input_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="table-search-input" <%= render_component_attributes %>>
+<div <%= attributes_html %>>
   <%= simple_form_for :q, url: "", method: :get, html: { class: "flex items-center", data: { controller: "form", turbo_frame: nil } } do |f| %>
     <label for="search" class="sr-only">Search</label>
     <div class="relative w-full">

data/app/views/components/table_search_input/table_search_input_component.rb

@@ -1,10 +1,15 @@
-module Plutonium::Ui
-  class TableSearchInputComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class TableSearchInputComponent < PlutoniumUi::Base
     option :search_object
-    # def classname
-    #   "custom classnames here #{super}"
-    # end
+
+    private
+
+    def base_attributes
+      {
+        controller: "table-search-input"
+      }
+    end
   end
 end
 
-Plutonium::ComponentRegistry.register :table_search_input, to: Plutonium::Ui::TableSearchInputComponent
+Plutonium::ComponentRegistry.register :table_search_input, to: PlutoniumUi::TableSearchInputComponent

data/app/views/components/table_toolbar/table_toolbar_component.html.erb

@@ -1,4 +1,4 @@
-<div data-controller="table-toolbar" <%= render_component_attributes %>>
+<div <%= attributes_html %>>
     <%= render_component :toolbar, actions:, resource: resource_class do %>
         <% if search_object.search_filter.present? && current_policy.search? %>
             <%= render_component "table_search_input", search_object: search_object %>

data/app/views/components/table_toolbar/table_toolbar_component.rb

@@ -1,9 +1,17 @@
-module Plutonium::Ui
-  class TableToolbarComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class TableToolbarComponent < PlutoniumUi::Base
     option :resource_class
     option :search_object
     option :actions
+
+    private
+
+    def base_attributes
+      {
+        controller: "table-toolbar"
+      }
+    end
   end
 end
 
-Plutonium::ComponentRegistry.register :table_toolbar, to: Plutonium::Ui::TableToolbarComponent
+Plutonium::ComponentRegistry.register :table_toolbar, to: PlutoniumUi::TableToolbarComponent

data/app/views/components/toolbar/toolbar_component.html.erb

@@ -1,9 +1,9 @@
 <%#= render_component :panel do %>
-  <div data-controller="toolbar" <%= render_component_attributes %>>
+  <div <%= attributes_html %>>
     <div class="w-full md:w-1/2">
         <%= content %>
     </div>
-    <div class="<%= toolbar_actions_classes %>">
+    <div class="<%= toolbar_actions_classname %>">
       <% actions.values.each do |action| %>
         <%= toolbar_action_button resource, action %>
       <% end %>

data/app/views/components/toolbar/toolbar_component.rb

@@ -1,18 +1,26 @@
-module Plutonium::Ui
-  class ToolbarComponent < Plutonium::Ui::Base
+module PlutoniumUi
+  class ToolbarComponent < PlutoniumUi::Base
     option :resource
     option :actions, default: proc { {} }
 
-    def classname
-      "flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 #{super}"
+    private
+
+    def base_attributes
+      {
+        classname: "flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4",
+        toolbar_actions_classname: "w-full md:w-auto flex flex-col md:flex-row space-y-1 md:space-y-0 items-stretch md:items-center justify-end shrink-0",
+        controller: "toolbar"
+      }
     end
 
-    private
+    def filtered_attributes
+      %i[toolbar_actions_classname]
+    end
 
-    def toolbar_actions_classes
-      "w-full md:w-auto flex flex-col md:flex-row space-y-1 md:space-y-0 items-stretch md:items-center justify-end shrink-0"
+    def toolbar_actions_classname
+      raw_attributes_hash[:toolbar_actions_classname]
     end
   end
 end
 
-Plutonium::ComponentRegistry.register :toolbar, to: Plutonium::Ui::ToolbarComponent
+Plutonium::ComponentRegistry.register :toolbar, to: PlutoniumUi::ToolbarComponent