avo 3.30.4 → 4.0.0.beta.1

data/app/components/avo/fields/file_field/edit_component.html.erb

@@ -6,24 +6,32 @@
   <% end %>
 
   <% if can_upload_file? %>
+    <% upload_input_id = "#{@form.object_name}_#{@field.id}" %>
     <div data-controller="clear-input">
-      <div class="mt-2 flex items-center">
+      <%= render Avo::UI::FileUploadInputComponent.new(
+        id: upload_input_id,
+        title: @field.is_audio ? "Upload audio" : "Click to upload",
+        subtitle: "or drag and drop",
+        description: @field.accept.present? ? "Accepts #{@field.accept}" : nil,
+        disabled: disabled?,
+      ) do %>
         <%= @form.file_field @field.id,
+          id: upload_input_id,
           accept: @field.accept,
           data: @field.get_html(:data, view: view, element: :input)
             .merge(
               action: "change->clear-input#showClearButton",
-              clear_input_target: "input"
+              clear_input_target: "input",
+              file_upload_input_target: "input"
             ),
           direct_upload: @field.direct_upload,
           disabled: disabled?,
           style: @field.get_html(:style, view: view, element: :input),
-          autofocus: @autofocus,
-          class: "w-full"
+          autofocus: @autofocus
         %>
-      </div>
+      <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer mt-2",
           id: :reset,
           type: :button,
           data: {

data/app/components/avo/fields/files_field/edit_component.html.erb

@@ -2,14 +2,21 @@
   <%= render Avo::Fields::Common::Files::ListViewerComponent.new(field: @field, resource: @resource) if @field.value.present? %>
 
   <% if can_upload_file? %>
+    <% upload_input_id = "#{@form.object_name}_#{@field.id}" %>
     <div data-controller="clear-input">
-      <div class="mt-2 flex items-center">
+      <%= render Avo::UI::FileUploadInputComponent.new(
+        id: upload_input_id,
+        description: @field.accept.present? ? "Accepts #{@field.accept}" : "Accepts .jpg and .png",
+        disabled: disabled?,
+      ) do %>
         <%= @form.file_field @field.id,
+          id: upload_input_id,
           accept: @field.accept,
           data: @field.get_html(:data, view: view, element: :input)
             .merge(
               action: "change->clear-input#showClearButton",
-              clear_input_target: "input"
+              clear_input_target: "input",
+              file_upload_input_target: "input"
             ),
           direct_upload: @field.direct_upload,
           disabled: disabled?,
@@ -17,9 +24,9 @@
           style: @field.get_html(:style, view: view, element: :input),
           autofocus: @autofocus
         %>
-      </div>
+      <% end %>
       <%= content_tag :button,
-          class: "self-center hidden font-semibold text-xs text-red-600 p-1",
+          class: "self-center hidden font-semibold text-xs text-red-600 p-1 cursor-pointer",
           id: :reset,
           type: :button,
           data: {

data/app/components/avo/fields/has_one_field/show_component.html.erb

@@ -1,13 +1,13 @@
 <% if @field.value %>
-  <turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" loading=<%= turbo_frame_loading %> target="_top" class="block">
+  <%= turbo_frame_tag @field.turbo_frame, src: @field.frame_url, loading: turbo_frame_loading, target: "_top", class: "block" do %>
     <%= render(Avo::LoadingComponent.new(title: @field.name)) %>
-  </turbo-frame>
+  <% end %>
 <% else %>
-  <%= render Avo::PanelComponent.new(name: @field.name) do |c| %>
-    <% c.with_tools do %>
+  <%= render ui.panel(title: @field.name) do |panel| %>
+    <% panel.with_controls do %>
       <% if can_attach? %>
         <%= a_link attach_path,
-          icon: 'heroicons/outline/link',
+          icon: 'tabler/outline/link',
           color: :primary,
           style: :text,
           data: {
@@ -17,20 +17,21 @@
           <%= t('avo.attach_item', item: @field.name.humanize(capitalize: false)) %>
         <% end %>
       <% end %>
+
       <% if can_see_the_create_button? %>
         <%= a_link create_path,
-          icon: 'heroicons/outline/plus',
+          icon: 'tabler/outline/plus',
           'data-target': 'create',
           'data-turbo-frame': '_top',
           style: :primary,
-          color: :primary do %>
+          color: :accent do %>
           <%= t('avo.create_new_item', item: @field.name.humanize(capitalize: false) ) %>
         <% end %>
       <% end %>
     <% end %>
 
-    <% c.with_body do %>
-      <div class="py-8 flex justify-center items-center">
+    <% panel.with_body do %>
+      <div class="flex items-center justify-center py-8">
         <%= empty_state by_association: params[:related_name].present? %>
       </div>
     <% end %>

data/app/components/avo/fields/heading_field/edit_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
+<div class="<%= class_names("w-full",{'overflow-hidden rounded-t': @index == 0}) %>" data-field-id="<%= @field.id %>">
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
 </div>

data/app/components/avo/fields/heading_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
+<%= tag.div class: class_names(@field.width_class, "overflow-hidden rounded-t": @index == 0), data: {field_id: @field.id} do %>
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
-</div>
+<% end %>

data/app/components/avo/fields/password_field/edit_component.html.erb

@@ -1,7 +1,8 @@
 <%= field_wrapper(**field_wrapper_args) do %>
-  <div class="relative" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
+  <div class="field-wrapper__input" data-controller="<%= @field.revealable ? 'password-visibility' : nil %>">
     <%= @form.password_field @field.id,
       value: @field.value,
+      type: "password",
       class: classes("w-full"),
       data: @field.get_html(:data, view: view, element: :input).merge(password_visibility_target: "input"),
       disabled: disabled?,
@@ -12,12 +13,9 @@
     %>
 
     <% if @field.revealable %>
-      <button data-action="password-visibility#toggle" type="button" class="text-gray-500 absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer">
-        <!-- Heroicon name: outline/eye -->
-        <%= helpers.svg('heroicons/outline/eye', class: "size-6", data: { 'password-visibility-target': 'icon' }) %>
-
-        <!-- Heroicon name: outline/eye-off -->
-        <%= helpers.svg('heroicons/outline/eye-off', class: "size-6 hidden", data: { 'password-visibility-target': 'icon' }) %>
+      <button data-action="password-visibility#toggle" type="button" class="input-field__password-toggle">
+        <%= helpers.svg('tabler/outline/eye', data: { 'password-visibility-target': 'icon' }) %>
+        <%= helpers.svg('tabler/outline/eye-off', class: "hidden", data: { 'password-visibility-target': 'icon' }) %>
       </button>
     <% end %>
   </div>

data/app/components/avo/fields/progress_bar_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= field_wrapper(**field_wrapper_args) do %>
   <%= content_tag :div, data: {controller: "progress-bar-field"} do %>
     <% if @field.display_value %>
-      <div class="text-center text-sm font-semibold w-full leading-none mb-1">
+      <div class="text-center text-sm font-semibold w-full leading-none mb-1 mt-1">
         <span data-progress-bar-field-target="label"><%= @field.value %></span><%= @field.value_suffix if @field.value_suffix.present? %>
       </div>
     <% end %>

data/app/components/avo/fields/radio_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= field_wrapper(**field_wrapper_args) do %>
   <div class="flex flex-col gap-2">
     <% @field.options.each do |key, value| %>
-      <div>
+      <div class="flex items-center gap-1">
         <%= form.radio_button @field.id, key, checked: (@field.value.to_s == key.to_s) %>
         <%= form.label @field.id, value, value: key %>
       </div>

data/app/components/avo/fields/show_component.rb

@@ -3,24 +3,22 @@
 class Avo::Fields::ShowComponent < Avo::BaseComponent
   include Avo::ResourcesHelper
 
-  attr_reader :compact
   attr_reader :field
   attr_reader :index
   attr_reader :kwargs
   attr_reader :resource
   attr_reader :stacked
-  attr_reader :short
   attr_reader :view
+  attr_reader :full_width
 
-  def initialize(field: nil, resource: nil, index: 0, form: nil, compact: false, short: false, stacked: nil, **kwargs)
-    @compact = compact
+  def initialize(field: nil, resource: nil, index: 0, form: nil, stacked: nil, full_width: nil, **kwargs)
     @field = field
     @index = index
     @resource = resource
     @stacked = stacked
-    @short = short
     @kwargs = kwargs
     @view = Avo::ViewInquirer.new("show")
+    @full_width = full_width
   end
 
   def wrapper_data
@@ -48,12 +46,11 @@ class Avo::Fields::ShowComponent < Avo::BaseComponent
 
   def field_wrapper_args
     {
-      compact: compact,
       field: field,
       index: index,
       resource: resource,
-      short: short,
       stacked: stacked,
+      full_width: full_width,
       view: view
     }
   end

data/app/components/avo/fields/stars_field/edit_component.html.erb

@@ -3,15 +3,14 @@
     <%= @form.hidden_field @field.id,
       value: @field.value,
       data: { stars_field_target: "valueInput" } %>
-    
-    <div class="rating-group flex items-center gap-1 mb-3" 
+    <div class="rating-group flex items-center gap-1"
       data-component="avo/fields/common/stars_component"
       data-stars-field-target="starsContainer"
       data-max="<%= @field.max %>"
       data-current-value="<%= @field.value || 0 %>">
       <% (1..@field.max).each do |rating_value| %>
-        <%= helpers.svg('heroicons/solid/star', 
-          class: class_names("star inline-block mr-0.5", filled: rating_value <= (@value || 0)),
+        <%= helpers.svg('heroicons/solid/star',
+          class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0)),
           data: {
             star_value: rating_value,
             stars_field_target: "star",

data/app/components/avo/fields/tags_field/edit_component.html.erb

@@ -23,7 +23,7 @@
     %>
     <%# real field %>
     <%= @form.text_field @field.id,
-      class: classes("hidden w-full !py-0 min-h-10 items-center border-primary-500 focus-within:border-primary-500"),
+      class: classes("!hidden w-full"),
       data: {
         tags_field_target: :input,
       },

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -1,9 +1,8 @@
-<div class="flex px-2 py-1 rounded bg-gray-100 text-sm text-gray-800 font-normal flex-shrink-0"
-  <% if @title.present? %>
-    data-tippy="tooltip"
-    title="<%= @title %>"
-  <% end %>
-  data-target="tag-component"
->
+<%= tag.div class: "flex px-2 py-0.5 rounded-sm bg-gray-100 text-sm text-gray-800 font-normal shrink-0",
+  data: {
+    target: "tag-component",
+    tippy: (@title.present? ? "tooltip" : nil),
+  }.compact,
+  title: @title do %>
   <%= @label %>
-</div>
+<% end %>

data/app/components/avo/fields/time_field/edit_component.html.erb

@@ -14,7 +14,7 @@
   } do %>
     <%= @form.text_field @field.id,
       value: @field.edit_formatted_value,
-      class: classes("w-full #{"hidden" unless params[:avo_show_hidden_inputs]}"),
+      class: classes("w-full #{"!hidden" unless params[:avo_show_hidden_inputs]}"),
       data: {
         date_field_target: :input,
         placeholder: @field.placeholder,
@@ -37,7 +37,7 @@
       style: @field.get_html(:style, view: view, element: :input)
     %>
     <%= content_tag :button,
-      class: "absolute right-0 self-center mr-4 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50",
+      class: "absolute end-0 self-center me-2 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer",
       id: :reset,
       type: :button,
       title: t("avo.reset").capitalize,
@@ -46,7 +46,7 @@
         action: "click->date-field#clear",
         tippy: :tooltip
       } do %>
-      <%= helpers.svg "avo/times", class: "h-4" %>
+      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/tiptap_field/edit_component.html.erb

@@ -1,4 +1,4 @@
-<%= field_wrapper(**field_wrapper_args) do %>
+<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
   <%= content_tag :div,
     class: "tiptap__field",
     data: {
@@ -20,45 +20,45 @@
         <%= content_tag :div, class: "tiptap__toolbar-area" do %>
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--bold", data: { action: "click->tiptap-field#bold" } do %>
-              <%= helpers.svg("avo/editor-bold") %>
+              <%= helpers.svg("tabler/outline/bold", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--italic", data: { action: "click->tiptap-field#italic" } do %>
-              <%= helpers.svg("avo/editor-italic") %>
+              <%= helpers.svg("tabler/outline/italic", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--underline", data: { action: "click->tiptap-field#underline" } do %>
-              <%= helpers.svg("avo/editor-underline") %>
+              <%= helpers.svg("tabler/outline/underline", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--strike", data: { action: "click->tiptap-field#strike" } do %>
-              <%= helpers.svg("avo/editor-strike") %>
+              <%= helpers.svg("tabler/outline/strikethrough", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--ul", data: { action: "click->tiptap-field#unorderedList" } do %>
-              <%= helpers.svg("avo/editor-list") %>
+              <%= helpers.svg("tabler/outline/list", class: "size-5") %>
             <% end %>
 
             <%= button_tag type: "button", class: "tiptap__button tiptap__button--ol", data: { action: "click->tiptap-field#orderedList" } do %>
-              <%= helpers.svg("avo/editor-ordered-list") %>
+              <%= helpers.svg("tabler/outline/list-numbers", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group" do %>
             <%= button_tag type: "button", disabled: true, class: "tiptap__button tiptap__button--link", data: { action: "click->tiptap-field#toggleLinkArea" } do %>
-              <%= helpers.svg("avo/editor-link") %>
+              <%= helpers.svg("tabler/outline/link", class: "size-5") %>
             <% end %>
           <% end %>
 
           <%= content_tag :div, class: "tiptap__button-group tiptap__link-area hidden" do %>
             <%= text_field_tag nil, nil, class: "tiptap__link-field", placeholder: "Enter URL here ...", data: { action: "keydown->tiptap-field#preventEnter" } %>
             <%= button_tag type: "button", class: "tiptap__button", data: { action: "click->tiptap-field#setLink" } do %>
-              <%= helpers.svg("heroicons/outline/check-circle") %>
+              <%= helpers.svg("tabler/outline/circle-check", class: "size-5") %>
             <% end %>
             <%= button_tag type: "button", class: "tiptap__button tiptap__link-button--unset", data: { action: "click->tiptap-field#unsetLink" } do %>
-              <%= helpers.svg("avo/trash") %>
+              <%= helpers.svg("tabler/outline/trash", class: "size-5") %>
             <% end %>
           <% end %>
         <% end %>
@@ -67,7 +67,7 @@
 
     <%= @form.text_area @field.id,
       value: @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: {
         tiptap_field_target: "input",
         **@field.get_html(:data, view: view, element: :input)

data/app/components/avo/fields/tiptap_field/show_component.html.erb

@@ -1,10 +1,10 @@
 <%= field_wrapper(**field_wrapper_args, data: { controller: 'hidden-input' }) do %>
-  <div data-controller="hidden-input" class="flex w-full">
-    <% unless @field.always_show %>
-      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
-    <% end %>
+  <div data-controller="hidden-input" class="flex flex-col w-full">
     <div class="<%= class_names("tiptap__content py-2 max-w-4xl", "hidden": !@field.always_show) %> " data-hidden-input-target="content">
       <%= sanitize @field.value.to_s %>
     </div>
+    <% unless @field.always_show %>
+      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
+    <% end %>
   </div>
 <% end %>

data/app/components/avo/fields/trix_field/edit_component.html.erb

@@ -1,4 +1,4 @@
-<%= field_wrapper(**field_wrapper_args) do %>
+<%= field_wrapper(**field_wrapper_args, full_width: true) do %>
   <%= content_tag :div,
     class: class_names("relative block overflow-x-auto max-w-4xl", @input_id),
     data: do %>
@@ -14,7 +14,7 @@
     <% end %>
     <%= @form.text_area @field.id,
       value: @field.value.try(:to_trix_html) || @field.value,
-      class: classes("w-full hidden"),
+      class: classes("w-full !hidden"),
       data: @field.get_html(:data, view: view, element: :input),
       disabled: disabled?,
       id: @input_id,

data/app/components/avo/filters_component.html.erb

@@ -1,8 +1,7 @@
 <div data-controller="toggle" data-toggle-exemption-containers-value='[".flatpickr-calendar"]' data-component-name="<%= self.class.to_s.underscore %>">
   <div class="relative w-full flex justify-between">
-    <%= a_button class: 'focus:outline-none',
-      color: :primary,
-      size: :sm,
+    <%= a_button class: 'focus:outline-hidden',
+      style: :primary,
       icon: "avo/filter",
       title: t('avo.click_to_reveal_filters'),
       'data-button': 'resource-filters',
@@ -10,23 +9,16 @@
       'data-tippy': 'tooltip' do %>
       <%= t 'avo.filters' %>
       <% if @applied_filters.present? %>
-        <span class="ml-1">(<%= "#{@applied_filters.count} #{t('avo.applied', count: @applied_filters.count)}" %>)</span>
+        <span class="ms-1">(<%= "#{@applied_filters.count} #{t('avo.applied', count: @applied_filters.count)}" %>)</span>
       <% end %>
     <% end %>
-    <div
-      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
-      data-toggle-target="panel"
-      data-transition-enter="transition ease-out duration-100"
-      data-transition-enter-start="transform opacity-0 -translate-y-1"
-      data-transition-enter-end="transform opacity-100 translate-y-0"
-      data-transition-leave="transition ease-in duration-75"
-      data-transition-leave-start="transform opacity-100 translate-y-0"
-      data-transition-leave-end="transform opacity-0 -translate-y-1"
-    >
+    <%= tag.div class: 'absolute block inset-auto sm:end-0 top-full bg-white min-w-[300px] mt-2 z-40 shadow-modal rounded-sm divide-y divide-gray-300 css-animate-slide-down',
+      data: {toggle_target: 'panel'},
+      hidden: params[:keep_filters_panel_open] != '1' do %>
       <% @filters.each do |filter| %>
         <%= render partial: filter.class.template, locals: {filter: filter} %>
       <% end %>
-      <div class="p-4 border-gray-300 border-t">
+      <div class="p-4 border-tertiary border-t">
         <% if @applied_filters.present? %>
           <%= a_link reset_path, data: {turbo_frame: params[:turbo_frame]}, color: :gray, size: :sm, class: 'w-full justify-center' do %>
             <%= t('avo.reset_filters') %>
@@ -37,6 +29,6 @@
           <% end %>
         <% end %>
       </div>
-    </div>
+    <% end %>
   </div>
 </div>

data/app/components/avo/index/field_wrapper_component.html.erb

@@ -1,11 +1,18 @@
 <%= content_tag :td,
-  class: "group/clipboard min-h-[3rem] px-3 leading-tight whitespace-nowrap h-full text-slate-800 text-base #{classes}",
+  class: class_names(
+    "group/clipboard px-2 leading-none whitespace-nowrap h-full text-content text-sm",
+    @classes,
+    @field.get_html(:classes, view: @view, element: :wrapper),
+    {
+      "py-4": !@flush
+    }
+  ),
   data: {
     field_id: @field.id,
     field_type: @field.type,
     **stimulus_attributes
   },
-  style: style do %>
+  style: @field.get_html(:style, view: @view, element: :wrapper) do %>
   <% if render_dash? %>
     —
   <% else %>

data/app/components/avo/index/field_wrapper_component.rb

@@ -13,22 +13,6 @@ class Avo::Index::FieldWrapperComponent < Avo::BaseComponent
     @classes = @args.dig(:class) || ""
   end
 
-  def classes
-    result = @classes
-
-    unless @flush
-      result += " py-3"
-    end
-
-    result += " #{@field.get_html(:classes, view: @view, element: :wrapper)}"
-
-    result
-  end
-
-  def style
-    @field.get_html(:style, view: @view, element: :wrapper)
-  end
-
   def stimulus_attributes
     attributes = {}
 

data/app/components/avo/index/grid_cover_empty_state_component.html.erb

@@ -1,3 +1,3 @@
-<div class="absolute bg-gray-50 w-full h-full">
-  <%= image_tag Avo.configuration.branding.placeholder, class: "relative transform -translate-x-1/2 -translate-y-1/2 h-20 text-gray-400 inset-auto top-1/2 left-1/2", loading: :lazy %>
+<div class="absolute bg-gray-50 size-full content-center">
+  <%= image_tag Avo.configuration.branding.placeholder, class: "relative h-20 text-gray-400 mx-auto", loading: :lazy %>
 </div>

data/app/components/avo/index/grid_item_component.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag :div,
   id: "#{self.class.to_s.underscore}_#{@resource.record_param}",
-  class: "relative bg-white rounded shadow-modal flex flex-col group",
+  class: "grid-card",
   data: {
     component_name: self.class.to_s.underscore,
     resource_name: @resource.class.to_s,
@@ -9,19 +9,36 @@
     **(try(:drag_reorder_item_data_attributes) || {}),
   } do %>
   <%= content_tag :div,
-    class: class_names("relative w-full pb-3/4 rounded-t overflow-hidden", html(:cover, :classes)),
+    class: class_names("grid-card__image", html(:cover, :classes)),
     style: html(:cover, :style) do %>
-    <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg, checked: @grid_item_checked) if @resource.record_selector%>
     <%= render_cover %>
-    <%= render_badge %>
+    <%= render Avo::RowSelectorComponent.new(checked: @grid_item_checked) if @resource.record_selector %>
   <% end %>
-  <div class="grid grid-cols-1 place-content-between p-4 h-full">
-    <div class="mb-4 h-full flex flex-col space-between">
-      <%= render_title %>
-      <%= render_body %>
-    </div>
-    <div class="place-self-end w-full">
-      <%= render(Avo::Index::ResourceControlsComponent.new(resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, view_type: :grid, actions: @actions)) %>
-    </div>
+  <div class="grid-card__actions-row">
+    <%= render_badge %>
+    <%= render Avo::UI::DropdownComponent.new do |component| %>
+      <% component.with_trigger do %>
+        <%= render Avo::ButtonComponent.new(
+          icon: "tabler/outline/dots-vertical",
+          size: :lg,
+          class: "grid-card__action",
+          data: {action: component.action}
+        ) %>
+      <% end %>
+      <% component.with_items do %>
+        <%= render Avo::Index::ResourceControlsDropdownComponent.new(
+          resource: @resource,
+          reflection: @reflection,
+          parent_record: @parent_record,
+          parent_resource: @parent_resource,
+          view_type: :grid,
+          actions: @actions
+        ) %>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="grid-card__content">
+    <%= render_title %>
+    <%= render_body %>
   </div>
 <% end %>

data/app/components/avo/index/grid_item_component.rb

@@ -54,7 +54,7 @@ class Avo::Index::GridItemComponent < Avo::BaseComponent
   def render_title
     return if @card[:title].blank?
 
-    content_tag :div, class: "grid font-semibold leading-tight text-lg mb-2 #{html(:title, :classes)}", style: html(:title, :style) do
+    content_tag :div, class: "grid-card__title #{html(:title, :classes)}", style: html(:title, :style) do
       link_to @card[:title], resource_view_path
     end
   end
@@ -62,24 +62,26 @@ class Avo::Index::GridItemComponent < Avo::BaseComponent
   def render_body
     return if @card[:body].blank?
 
-    content_tag :div, class: "text-sm break-words text-gray-500 #{html(:body, :classes)}", style: html(:body, :style) do
+    content_tag :div, class: "grid-card__description #{html(:body, :classes)}", style: html(:body, :style) do
       @card[:body]
     end
   end
 
   def render_badge
-    return if @card[:badge_label].blank?
+    return if @card[:badge].blank? || (@card[:badge][:label].blank? && @card[:badge][:icon].blank?)
 
+    # Wrap BadgeComponent in positioned container to maintain absolute positioning
     content_tag :div,
-      class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded shadow-lg px-2 py-px z-10", html(:badge, :classes)),
-      title: @card[:badge_title],
+      class: class_names("grid-card__badge", html(:badge, :classes)),
+      title: @card[:badge][:title],
       style: html(:badge, :style),
       data: {target: :badge, tippy: :tooltip, **(html(:badge, :data).presence || {})} do
-      @card[:badge_label]
+      render Avo::UI::BadgeComponent.new(
+        label: @card[:badge][:label],
+        color: @card[:badge][:color],
+        style: @card[:badge][:style],
+        icon: @card[:badge][:icon]
+      )
     end
   end
-
-  def badge_color
-    @card[:badge_color] || "gray"
-  end
 end

data/app/components/avo/index/resource_controls_component.html.erb

@@ -1,4 +1,4 @@
-<%= content_tag :div, class: "#{view_type == "grid" ? "flex-wrap" : "space-x-2"} flex flex-row justify-evenly ml-2 has-record-selector:ml-0" do %>
+<%= content_tag :div, class: class_names("resource-controls flex flex-row justify-evenly items-center ms-2 has-record-selector:ms-0", {"flex-wrap": view_type == "grid", "gap-x-2": view_type != "grid"}) do %>
   <% @resource.render_row_controls(item: singular_resource_name).each do |control| %>
     <%= render_control control %>
   <% end %>