avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/fields/avatar_field/index_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::AvatarField::IndexComponent < Avo::Fields::IndexComponent
+end

data/app/components/avo/fields/badge_field/index_component.html.erb

@@ -1,3 +1,9 @@
 <%= index_field_wrapper(**field_wrapper_args, flush: true) do %>
-  <%= render Avo::Fields::Common::BadgeViewerComponent.new value: @field.value, options: @field.options %>
+  <%= render Avo::UI::BadgeComponent.new(
+    label: @field.value,
+    color: @field.color,
+    style: @field.style,
+    icon: @field.icon,
+    classes: 'min-w-24'
+  ) %>
 <% end %>

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

@@ -1,3 +1,8 @@
 <%= field_wrapper(**field_wrapper_args) do %>
-  <%= render Avo::Fields::Common::BadgeViewerComponent.new value: @field.value, options: @field.options %>
+  <%= render Avo::UI::BadgeComponent.new(
+    label: @field.value,
+    color: @field.color,
+    style: @field.style,
+    icon: @field.icon,
+  ) %>
 <% end %>

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

@@ -1,5 +1,5 @@
 <% if is_polymorphic? %>
-  <div class="divide-y"
+  <div class="w-full divide-y divide-gray-200"
       data-controller="belongs-to-field"
       data-searchable="<%= @field.is_searchable? %>"
       data-association="<%= @field.id %>"
@@ -20,7 +20,7 @@
         },
         disabled: disabled
       }
-    %>
+      %>
       <%
         # If the select field is disabled, no value will be sent. It's how HTML works.
         # Thus the extra hidden field to actually send the related id to the server.
@@ -61,7 +61,7 @@
                 data: @field.get_html(:data, view: view, element: :input),
                 disabled: disabled
               }
-            %>
+              %>
               <%
               # If the select field is disabled, no value will be sent. It's how HTML works.
               # Thus the extra hidden field to actually send the related id to the server.
@@ -71,14 +71,15 @@
             <% end %>
             <% target_resource_for_type = Avo.resource_manager.get_resource_by_model_class(type.to_s) %>
             <% if field.can_create?(target_resource_for_type) %>
-              <% create_href = create_path(target_resource_for_type) %>
+              <% create_href = create_path(target_resource_for_type, **modal_args) %>
               <% if !disabled && create_href.present? %>
                 <%= link_to t("avo.create_new_item", item: type.model_name.human.downcase),
-                      create_href,
-                      class: "text-sm",
-                      data: {
-                        turbo_prefetch: false
-                      }
+                  create_href,
+                  class: "text-sm",
+                  data: {
+                    turbo_frame: Avo::MODAL_FRAME_ID,
+                    turbo_prefetch: false
+                  }
                 %>
               <% end %>
             <% end %>
@@ -123,11 +124,12 @@
     <% if field.can_create? %>
       <% if !disabled && create_path.present? %>
         <%= link_to t("avo.create_new_item", item: @field.name.downcase),
-              create_path,
-              class: "text-sm",
-              data: {
-                turbo_prefetch: false
-              }
+          create_path(**modal_args),
+          class: "text-sm",
+          data: {
+            turbo_frame: Avo::MODAL_FRAME_ID,
+            turbo_prefetch: false
+          }
         %>
       <% end %>
     <% end %>

data/app/components/avo/fields/belongs_to_field/edit_component.rb

@@ -2,7 +2,7 @@
 
 class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
   def initialize(...)
-    super(...)
+    super
 
     @polymorphic_record = nil
   end
@@ -57,17 +57,27 @@ class Avo::Fields::BelongsToField::EditComponent < Avo::Fields::EditComponent
     @field.get_html(:data, view: view, element: :input).fetch(:action, nil)
   end
 
-  def create_path(target_resource = nil)
+  def create_path(target_resource = nil, **args)
     return nil if @resource.blank?
 
     helpers.new_resource_path(**{
       via_relation: @field.id.to_s,
       resource: target_resource || @field.target_resource,
       via_record_id: resource.record.persisted? ? resource.record.to_param : nil,
-      via_belongs_to_resource_class: resource.class.name
+      via_belongs_to_resource_class: resource.class.name,
+      **args
     }.compact)
   end
 
+  def modal_args
+    {
+      modal_layout: true,
+      modal_width: :full,
+      modal_height: :full,
+      wrapper_class: "container mx-auto py-4"
+    }
+  end
+
   private
 
   def visit_through_association?

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

@@ -15,14 +15,14 @@
         data:  @field.get_html(:data, view: view, element: :input),
         style: @field.get_html(:style, view: view, element: :input),
         class: class_names(
-          "text-lg h-4 w-4 checked:bg-primary-400 focus:checked:!bg-primary-400 rounded",
+          "size-4",
           @field.get_html(:classes, view: view, element: :input),
           "sr-only peer": as_toggle?
         ) %>
 
       <% if as_toggle? %>
         <div class="block w-10 h-6 rounded-full bg-gray-300 peer-checked:bg-green-500"></div>
-        <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 transform peer-checked:translate-x-4"></div>
+        <div class="dot absolute start-1 top-1 bg-white w-4 h-4 rounded-full transition-transform duration-200 transform peer-checked:translate-x-4"></div>
       <% end %>
     <% end %>
   </div>

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

@@ -1,6 +1,6 @@
 <%= field_wrapper(**field_wrapper_args) do %>
   <div class="flex items-center">
-    <div class="space-y-2">
+    <div class="space-y-2 py-2">
       <% @field.options.each do |id, label| %>
         <label class="block">
           <%= @form.check_box @field.id,

data/app/components/avo/fields/boolean_group_field/edit_component.rb

@@ -2,11 +2,10 @@
 
 class Avo::Fields::BooleanGroupField::EditComponent < Avo::Fields::EditComponent
   def initialize(...)
-    super(...)
+    super
 
     # Initialize here to avoid multiple calls to @field.get_html for each option.
-    @classes = "w-4 h-4 rounded checked:bg-primary-400 focus:checked:!bg-primary-400" \
-      "#{@field.get_html(:classes, view: view, element: :input)}"
+    @classes = "size-4 #{@field.get_html(:classes, view: view, element: :input)}"
     @data = @field.get_html(:data, view: view, element: :input)
     @style = @field.get_html(:style, view: view, element: :input)
     @form_scope = @form.object_name

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

@@ -1,5 +1,5 @@
 <%= field_wrapper(**field_wrapper_args, full_width: true) do %>
-  <div data-controller="code-field" style="--height: <%= @field.height %>">
+  <div data-controller="code-field" class="w-full" style="--height: <%= @field.height %>">
     <%= text_area_tag @field.id, @field.value,
       class: helpers.input_classes('w-full'),
       placeholder: @field.placeholder,

data/app/components/avo/fields/common/boolean_check_component.rb

@@ -4,17 +4,17 @@ class Avo::Fields::Common::BooleanCheckComponent < Avo::BaseComponent
   STATE_CONFIG = {
     true => {
       name: "checked",
-      icon: "heroicons/outline/check-circle",
+      icon: "tabler/outline/circle-check",
       color: "text-green-600"
     },
     false => {
       name: "unchecked",
-      icon: "heroicons/outline/x-circle",
+      icon: "tabler/outline/circle-x",
       color: "text-red-600"
     },
     nil => {
       name: "indeterminate",
-      icon: "heroicons/outline/minus-circle",
+      icon: "tabler/outline/circle-minus",
       color: "text-gray-400"
     }
   }.freeze

data/app/components/avo/fields/common/boolean_group_component.html.erb

@@ -3,9 +3,9 @@
   <div class="hidden" data-tippy-target="content">
     <div class="p-1 space-y-1">
       <% @options.each do |id, label| %>
-        <div class="flex items-center flex-nowrap space-x-1">
+        <div class="flex items-center flex-nowrap space-x-1 rtl:space-x-reverse">
           <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: checked(id), size: :sm %>
-          <div class="flex itdems-center text-left text-sm py-px"><%= label %></div>
+          <div class="flex itdems-center text-start text-sm py-px"><%= label %></div>
         </div>
       <% end %>
     </div>

data/app/components/avo/fields/common/files/controls_component.html.erb

@@ -1,29 +1,32 @@
-<div class="flex">
-  <% if can_download_file? %>
-    <%= a_link helpers.main_app.rails_blob_path(@file, only_path: true, disposition: :attachment),
-      icon: "heroicons/outline/download",
-      color: :primary,
-      download: true,
-      class: 'text-center',
-      title: t('avo.download_file'),
-      data: { tippy: :tooltip },
-      compact: true,
-      size: :xs %>
+<% if can_download_file? %>
+  <%= link_to helpers.main_app.rails_blob_path(@file, only_path: true, disposition: :attachment),
+    class: "file-upload-item__action",
+    download: true,
+    title: t("avo.download_file"),
+    data: { tippy: :tooltip } do %>
+    <%= svg "tabler/outline/download" %>
   <% end %>
-</div>
-<div>
-  <% if can_delete_file? %>
-    <%= a_link destroy_path,
-      icon: "avo/trash",
-      color: :red,
-      compact: true,
-      size: :xs,
-      class: 'text-center',
-      title: t('avo.delete_file', item: @file.filename),
-      data: {
-        turbo_method: :delete,
-        turbo_confirm: t('avo.are_you_sure'),
-        tippy: :tooltip
-      } %>
+<% end %>
+
+<% if can_delete_file? %>
+  <%= link_to destroy_path,
+    class: "file-upload-item__action",
+    title: t("avo.delete_file", item: @file.filename),
+    data: {
+      turbo_method: :delete,
+      turbo_confirm: t("avo.are_you_sure"),
+      tippy: :tooltip
+    } do %>
+    <%= svg "tabler/outline/trash" %>
   <% end %>
-</div>
+<% end %>
+<% if can_reupload_file? %>
+  <%= link_to "#",
+    class: "file-upload-item__action",
+    title: t("avo.reupload_file", item: @file.filename),
+    data: {
+      tippy: :tooltip
+    } do %>
+    <%= svg "tabler/outline/refresh" %>
+  <% end %>
+<% end %>

data/app/components/avo/fields/common/files/controls_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 class Avo::Fields::Common::Files::ControlsComponent < Avo::BaseComponent
-  include Avo::ApplicationHelper
   include Avo::Fields::Concerns::FileAuthorization
 
   delegate :id, to: :@field

data/app/components/avo/fields/common/files/list_viewer_component.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag :div, class: class_names(
-  {
-    "-mt-9": @field.stacked && !@field.hide_view_type_switcher
-  }
+  "w-full @container",
+  "-mt-6": @field.stacked && !@field.hide_view_type_switcher
 ) do %>
   <%= turbo_frame_tag @field.id do %>
     <% unless @field.hide_view_type_switcher %>
-      <div class="justify-self-end flex justify-end items-center space-x-3">
+      <div class="justify-self-end flex justify-end items-center space-x-3 rtl:space-x-reverse">
         <%= render partial: 'avo/partials/view_toggle_button',
           locals: {
             available_view_types: @available_view_types,
@@ -19,7 +18,7 @@
       "py-4 rounded-2xl max-w-full",
       {
         "flex flex-col space-y-2": @view_type == :list,
-        "relative grid xs:grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6": @view_type == :grid
+        "relative grid xs:grid-cols-2 @sm:grid-cols-2 @xl:grid-cols-3 @2xl:grid-cols-4 @4xl:grid-cols-5 @6xl:grid-cols-6 @7xl:grid-cols-7 @8xl:grid-cols-8 gap-6": @view_type == :grid
       }
     ) do %>
       <% @field.value.attachments.each do |file| %>

data/app/components/avo/fields/common/files/view_type/grid_item_component.html.erb

@@ -17,7 +17,7 @@
       <span class="text-gray-500 mt-1 text-sm truncate" title="<%= file.filename %>"><%= file.filename %></span>
     <% end %>
   </div>
-  <div class="flex space-x-2">
+  <div class="flex space-x-2 rtl:space-x-reverse">
     <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
   </div>
 </div>

data/app/components/avo/fields/common/files/view_type/list_item_component.html.erb

@@ -1,22 +1,10 @@
-<div id="<%= dom_id file %>" class="relative min-h-full max-w-full flex-1 flex">
+<div id="<%= dom_id file %>">
   <% if file.present? %>
-    <div class="grid grid-cols-6 gap-2 items-center max-w-full w-full">
-      <div class="col-span-4 flex-1 flex flex-row items-center text-gray-700 overflow-x-auto mac-styled-scrollbar ">
-        <div class="rounded-full bg-slate-100 border border-gray-500 p-1.5 flex items-center justify-center">
-          <%= helpers.svg icon_for_file, class: "h-5 text-gray-600" %>
-        </div>
-        <p class="items-center h-full p-2 flex-shrink-0">
-          <%= file.filename %>
-        </p>
-      </div>
-      <div class="text-gray-700 flex-shrink-0 text-sm">
-        <%= helpers.number_to_human_size(file.byte_size) %>
-      </div>
-      <div class="flex space-x-2 justify-end col-span-1 flex-shrink-0">
-        <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
-      </div>
-    </div>
-  <% else %>
-    –
+    <%= render Avo::UI::FileUploadItemComponent.new(
+      title: file.filename.to_s,
+      size_label: helpers.number_to_human_size(file.byte_size),
+    ) do %>
+      <%= render Avo::Fields::Common::Files::ControlsComponent.new(field: @field, file: file, resource: @resource) %>
+    <% end %>
   <% end %>
 </div>

data/app/components/avo/fields/common/heading_component.html.erb

@@ -1,9 +1,9 @@
 <%= content_tag :div, class: @classes, data: @data do %>
-  <div class="py-2 px-6 h-full w-full">
+  <div class="py-2 px-4 h-full w-full">
     <% if @field.as_html %>
       <%= sanitize @field.value %>
     <% else %>
-      <div class="font-semibold uppercase"><%= @field.value %></div>
+      <div class="font-medium uppercase"><%= @field.value %></div>
     <% end %>
   </div>
 <% end %>

data/app/components/avo/fields/common/heading_component.rb

@@ -7,7 +7,7 @@ class Avo::Fields::Common::HeadingComponent < Avo::BaseComponent
 
   def after_initialize
     @view = @field.resource.view
-    @classes = "flex items-start py-1 leading-tight bg-gray-100 text-gray-500 text-xs #{@field.get_html(:classes, view: @view, element: :wrapper)}"
+    @classes = "flex items-start py-1 leading-tight bg-secondary text-content-secondary text-xs #{@field.get_html(:classes, view: @view, element: :wrapper)}"
     @data = {**stimulus_data_attributes, **@field.get_html(:data, view: @view, element: :wrapper)}
     add_stimulus_attributes_for(@field.resource, @data)
   end

data/app/components/avo/fields/common/key_value_component.html.erb

@@ -1,37 +1,33 @@
-<div class="w-full shadow-lg rounded overflow-hidden"
+<div class="key-value"
   data-controller="key-value"
   data-key-value-target="controller"
   data-options="<%= @field.options.to_json %>"
   data-input-classes="<%= input_classes %>"
   data-editable="<%= @view.form? %>"
 >
-  <div class="w-full flex flex-col">
-    <div class="flex w-full">
-      <div class="flex w-full bg-gray-700 shadow overflow-hidden">
-        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white border-gray-600 border-r">
+  <div class="key-value__table">
+    <div class="key-value__header">
+      <div class="key-value__header-cell key-value__header-cell--key">
           <%= @field.key_label %>
-        </div>
-        <div class="w-1/2 py-3 px-3 uppercase font-semibold text-xs text-white">
+      </div>
+      <div class="key-value__header-cell key-value__header-cell--value">
           <%= @field.value_label %>
-        </div>
-        <% if @view.form? %>
-          <div class="flex items-center justify-center p-2 px-[48px] border-l border-gray-600">
-            <a href="javascript:void(0);"
-              title="<%= @field.action_text %>"
-              data-tippy="tooltip"
-              data-button="add-row"
-              data-action="click->key-value#addRow"
-              <% if @field.disable_adding_rows %>
-                class="cursor-not-allowed"
-              <% end %>
-            >
-              <%= helpers.svg "heroicons/outline/plus-circle", class: 'text-gray-400 h-5 hover:text-gray-500' %>
-            </a>
-          </div>
-        <% end %>
       </div>
+      <% if @view.form? %>
+        <div class="key-value__header-cell key-value__header-cell--actions">
+          <a href="javascript:void(0);"
+            title="<%= @field.action_text %>"
+            data-tippy="tooltip"
+            data-button="add-row"
+            data-action="click->key-value#addRow"
+            class="key-value__action-button <%= 'cursor-not-allowed' if @field.disable_adding_rows %>"
+          >
+            <%= helpers.svg "heroicons/outline/plus-circle", class: 'key-value__action-icon' %>
+          </a>
+        </div>
+      <% end %>
     </div>
-    <div data-key-value-target="rows"></div>
+    <div class="key-value__body" data-key-value-target="rows"></div>
   </div>
   <% if @form.present? %>
     <%= @form.text_area @field.id,

data/app/components/avo/fields/common/nested_field_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Avo::Advanced::Nested::FieldComponent.new(
+<%= render Avo::Nested::FieldComponent.new(
   field: @field,
   parent_resource: @field.resource,
   view: @view,

data/app/components/avo/fields/common/nested_field_component.rb

@@ -7,6 +7,6 @@ class Avo::Fields::Common::NestedFieldComponent < Avo::BaseComponent
   prop :kwargs, kind: :**
 
   def render?
-    Avo.plugin_manager.installed?("avo-advanced")
+    Avo.plugin_manager.installed?("avo-nested")
   end
 end

data/app/components/avo/fields/common/progress_bar_component.html.erb

@@ -1,8 +1,8 @@
 <div class="flex items-center" data-component="<%= component_name %>">
   <% if @display_value %>
-    <div class="text-right text-sm font-semibold leading-none mr-2 min-w-[2rem]">
+    <div class="text-end text-sm font-semibold leading-none me-2 min-w-[2rem]">
       <%= @value %><%= @value_suffix if @value_suffix.present? %>
     </div>
   <% end %>
-  <%= tag :progress, min: 0, max: @max, value: @value, class: "block min-w-[6rem] #{"w-full" if show?} #{"w-auto" if index?}" %>
+  <%= tag :progress, min: 0, max: @max, value: @value, class: class_names("block min-w-[6rem] border-none", "w-full": show?, "w-auto": index?) %>
 </div>

data/app/components/avo/fields/common/stars_component.html.erb

@@ -2,7 +2,7 @@
   <% (1..@max).each do |rating_value| %>
     <%= helpers.svg(
       'heroicons/solid/star',
-      class: class_names("star inline-block mr-0.5", filled: rating_value <= (@value || 0))
+      class: class_names("star inline-block me-0.5", filled: rating_value <= (@value || 0))
     ) %>
   <% end %>
 </div>

data/app/components/avo/fields/common/status_viewer_component.html.erb

@@ -1,10 +1,4 @@
-<%
-  classes = "inline-block"
-  classes += " text-red-600" if @status == 'failed'
-  classes += " text-green-600" if @status == 'success'
-  classes += " text-gray-600" if @status == 'neutral'
-%>
-<div class="flex flex-shrink-0 <%= classes %> items-center">
+<div class=" <%= class_names("flex shrink-0 items-center", "text-red-600": @status == 'failed', "text-green-600": @status == 'success', "text-gray-600": @status == 'neutral') %>">
   <% if @status == 'success' %>
     <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
   <% elsif @status == 'failed' %>
@@ -13,9 +7,9 @@
     <%= helpers.svg 'heroicons/solid/minus-circle', class: 'h-4' %>
   <% elsif @status == 'loading' %>
     <div class="spinner">
-      <div class="double-bounce1 bg-gray-600"></div>
-      <div class="double-bounce2 bg-gray-800"></div>
+      <div class="double-bounce1"></div>
+      <div class="double-bounce2"></div>
     </div>
   <% end %>
-  <span class="ml-1"><%= @label %></span>
+  <span class="ms-1"><%= @label %></span>
 </div>

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

@@ -12,7 +12,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,
@@ -34,5 +34,18 @@
       placeholder: @field.placeholder,
       style: @field.get_html(:style, view: view, element: :input)
     %>
+
+    <%= content_tag :button,
+      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,
+      disabled: disabled?,
+      data: {
+        action: "click->date-field#clear",
+        tippy: :tooltip
+      } do %>
+      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
+    <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/date_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/easy_mde_field/show_component.html.erb

@@ -1,5 +1,5 @@
 <%= field_wrapper(**field_wrapper_args, full_width: true) do %>
-  <div data-controller="easy-mde">
+  <div data-controller="easy-mde" class="w-full">
     <%= text_area_tag @field.id, @field.value,
       class: helpers.input_classes('w-full js-has-easy-mde-editor'),
       placeholder: @field.placeholder,

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

@@ -3,7 +3,6 @@
 class Avo::Fields::EditComponent < Avo::BaseComponent
   include Avo::ResourcesHelper
 
-  attr_reader :compact
   attr_reader :field
   attr_reader :form
   attr_reader :index
@@ -12,9 +11,9 @@ class Avo::Fields::EditComponent < Avo::BaseComponent
   attr_reader :resource
   attr_reader :stacked
   attr_reader :view
+  attr_reader :full_width
 
-  def initialize(field: nil, resource: nil, index: 0, form: nil, compact: false, stacked: nil, multiple: false, autofocus: false, **kwargs)
-    @compact = compact
+  def initialize(field: nil, resource: nil, index: 0, form: nil, stacked: nil, full_width: nil, multiple: false, autofocus: false, **kwargs)
     @field = field
     @form = form
     @index = index
@@ -24,10 +23,15 @@ class Avo::Fields::EditComponent < Avo::BaseComponent
     @stacked = stacked
     @view = Avo::ViewInquirer.new("edit")
     @autofocus = autofocus
+    @full_width = full_width
   end
 
   def classes(extra_classes = "")
-    helpers.input_classes("#{@field.get_html(:classes, view: view, element: :input)} #{extra_classes}", has_error: @field.record_errors.include?(@field.id))
+    helpers.input_classes(
+      "#{@field.get_html(:classes, view: view, element: :input)} #{extra_classes}",
+      has_error: @field.record_errors.include?(@field.id),
+      size: @field.size
+    )
   end
 
   def render?
@@ -36,12 +40,12 @@ class Avo::Fields::EditComponent < Avo::BaseComponent
 
   def field_wrapper_args
     {
-      compact: compact,
       field: field,
       form: form,
       index: index,
       resource: resource,
       stacked: stacked,
+      full_width: full_width,
       view: view
     }
   end