solidus_admin 0.4.0 → 0.5.0

data/app/components/solidus_admin/ui/button/component.rb

@@ -2,67 +2,112 @@
 
 class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
   SIZES = {
-    s: %{
+    s: %(
       h-7 w-7 p-1
       text-xs font-semibold leading-none
-    },
-    m: %{
+    ),
+    m: %(
       h-9 w-9 p-1.5
       text-sm font-semibold leading-none
-    },
-    l: %{
+    ),
+    l: %(
       h-12 w-12 p-2
       text-base font-semibold leading-none
-    },
+    )
   }
 
   TEXT_PADDINGS = {
-    s: %{px-1.5 w-auto},
-    m: %{px-3 w-auto},
-    l: %{px-4 w-auto},
+    s: %(px-1.5 w-auto),
+    m: %(px-3 w-auto),
+    l: %(px-4 w-auto)
   }
 
   ICON_SIZES = {
-    s: %{w-[1.4em] h-[1.4em]},
-    m: %{w-[1.35em] h-[1.35em]},
-    l: %{w-[1.5em] h-[1.5em]},
+    s: %(w-[1.4em] h-[1.4em]),
+    m: %(w-[1.35em] h-[1.35em]),
+    l: %(w-[1.5em] h-[1.5em])
   }
 
   SCHEMES = {
-    primary: %{
+    primary: %(
       text-white bg-black
       hover:text-white hover:bg-gray-600
       active:text-white active:bg-gray-800 aria-current:text-white aria-current:bg-gray-800
       focus:text-white focus:bg-gray-700
       disabled:text-gray-400 disabled:bg-gray-100
       aria-disabled:text-gray-400 aria-disabled:bg-gray-100
-    },
-    secondary: %{
+    ),
+    secondary: %(
       text-gray-700 bg-white border border-1 border-gray-200
       hover:bg-gray-50
       active:bg-gray-100            aria-current:bg-gray-100
       focus:bg-gray-50
       disabled:text-gray-300 disabled:bg-white
       aria-disabled:text-gray-300 aria-disabled:bg-white
-    },
-    danger: %{
+    ),
+    danger: %(
       text-red-500 bg-white border border-1 border-red-500
       hover:bg-red-500 hover:border-red-600 hover:text-white
       active:bg-red-600 active:border-red-700 active:text-white aria-current:bg-red-600 aria-current:border-red-700 aria-current:text-white
       focus:bg-red-50 focus:bg-red-500 focus:border-red-600 focus:text-white
       disabled:text-red-300 disabled:bg-white disabled:border-red-200
       aria-disabled:text-red-300 aria-disabled:bg-white aria-disabled:border-red-200
-    },
-    ghost: %{
+    ),
+    ghost: %(
       text-gray-700 bg-transparent
       hover:bg-gray-50
       active:bg-gray-100 aria-current:bg-gray-100
       focus:bg-gray-50 focus:ring-gray-300 focus:ring-2
       disabled:text-gray-300 disabled:bg-transparent disabled:border-gray-300
       aria-disabled:text-gray-300 aria-disabled:bg-transparent aria-disabled:border-gray-300
-    },
+    )
   }
 
+  def self.add(path:, **options)
+    new(
+      tag: :a,
+      text: t(".add"),
+      icon: "add-line",
+      scheme: :primary,
+      href: path,
+      **options
+    )
+  end
+
+  def self.back(path:, **options)
+    new(
+      tag: :a,
+      title: t(".back"),
+      icon: "arrow-left-line",
+      scheme: :secondary,
+      href: path,
+      **options
+    )
+  end
+
+  def self.delete(**options)
+    new(
+      tag: :button,
+      text: t(".delete"),
+      scheme: :danger,
+      **options
+    )
+  end
+
+  def self.discard(path:, **options)
+    new(
+      tag: :a,
+      text: t(".discard"),
+      scheme: :secondary,
+      href: path,
+      **options
+    )
+  end
+
+  def self.save(**options)
+    new(text: t(".save"), **options)
+  end
+
   def initialize(
     tag: :button,
     text: nil,
@@ -77,23 +122,35 @@ class SolidusAdmin::UI::Button::Component < SolidusAdmin::BaseComponent
     @attributes = attributes
 
     @attributes[:class] = [
-      'justify-start items-center justify-center gap-1 inline-flex rounded',
-      'focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-0 [&:focus-visible]:outline-none',
+      "justify-start items-center justify-center gap-1 inline-flex rounded",
+      "focus:ring focus:ring-gray-300 focus:ring-0.5 focus:ring-offset-0 [&:focus-visible]:outline-none",
       SIZES.fetch(size.to_sym),
       (TEXT_PADDINGS.fetch(size.to_sym) if @text),
       SCHEMES.fetch(scheme.to_sym),
-      @attributes[:class],
-    ].join(' ')
+      @attributes[:class]
+    ].join(" ")
 
     @icon_classes = [
-      'fill-current',
-      ICON_SIZES.fetch(size.to_sym),
+      "fill-current",
+      ICON_SIZES.fetch(size.to_sym)
     ]
   end
 
+  def self.submit(resource:, **attrs)
+    unless (text = attrs.delete(:text))
+      resource_name = resource.model_name.human
+      text = resource.new_record? ? t(".submit.create", resource_name:) : t(".submit.update", resource_name:)
+    end
+    new(text:, type: :submit, **attrs)
+  end
+
+  def self.cancel
+    new(scheme: :secondary, text: t(".cancel"))
+  end
+
   def call
     content = []
-    content << render(component('ui/icon').new(name: @icon, class: @icon_classes)) if @icon
+    content << render(component("ui/icon").new(name: @icon, class: @icon_classes)) if @icon
     content << @text if @text
 
     content_tag(@tag, safe_join(content), **@attributes)

data/app/components/solidus_admin/ui/button/component.yml

@@ -0,0 +1,10 @@
+en:
+  add: "Add"
+  back: "Back"
+  cancel: "Cancel"
+  delete: "Delete"
+  discard: "Discard"
+  save: "Save"
+  submit:
+    create: "Add %{resource_name}"
+    update: "Update %{resource_name}"

data/app/components/solidus_admin/ui/checkbox/component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Checkbox::Component < SolidusAdmin::BaseComponent
+  SIZES = {
+    s: "w-4 h-4",
+    m: "w-5 h-5"
+  }.freeze
+
+  def initialize(size: :m, **attributes)
+    @size = size
+    @attributes = attributes
+  end
+
+  def call
+    tag.input(
+      type: "checkbox",
+      class: "
+        #{SIZES.fetch(@size)}
+        form-checkbox
+        cursor-pointer
+        disabled:cursor-not-allowed
+
+        bg-white rounded border border-2 border-gray-300
+        hover:border-gray-700
+        focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0
+        active:ring active:ring-gray-300 active:ring-0.5
+        disabled:border-gray-300
+
+        indeterminate:border-gray-700 indeterminate:bg-gray-700 indeterminate:text-white
+        indeterminate:hover:border-gray-500 indeterminate:hover:bg-gray-500
+        indeterminate:focus:bg-gray-700
+        indeterminate:disabled:border-gray-300 indeterminate:disabled:bg-gray-300
+
+        checked:border-gray-700 checked:bg-gray-700 checked:text-white
+        checked:hover:border-gray-500 checked:hover:bg-gray-500
+        checked:focus:bg-gray-700
+        checked:disabled:border-gray-300 checked:disabled:bg-gray-300
+      ",
+      **@attributes
+    )
+  end
+end

data/app/components/solidus_admin/ui/dropdown/component.rb

@@ -3,12 +3,12 @@
 class SolidusAdmin::UI::Dropdown::Component < SolidusAdmin::BaseComponent
   DIRECTIONS = {
     left: "right-0",
-    right: "left-0",
+    right: "left-0"
   }
 
   SIZES = {
     s: "w-5 h-5",
-    m: "w-[22px] h-[22px]",
+    m: "w-[22px] h-[22px]"
   }
 
   def initialize(text: nil, size: :m, direction: :left, **attributes)
@@ -21,7 +21,7 @@ class SolidusAdmin::UI::Dropdown::Component < SolidusAdmin::BaseComponent
     @attributes[:"data-action"] = "turbo:before-cache@window->#{stimulus_id}#close #{attributes[:"data-action"]}"
     @attributes[:class] = "
       font-normal
-      #{@size == :m ? 'text-base' : 'text-sm'}
+      #{(@size == :m) ? "text-base" : "text-sm"}
       #{@attributes[:class]}
     "
   end

data/app/components/solidus_admin/ui/forms/address/component.html.erb

@@ -1,54 +1,7 @@
 <fieldset class="<%= stimulus_id %>"
-  data-controller="<%= stimulus_id %>"
   <%= :disabled if @disabled %>
 >
   <div class="<%= stimulus_id %>--address-form flex flex-wrap gap-4 pb-4">
-    <%= render component("ui/forms/field").text_field(@name, :name, object: @address) %>
-    <%= render component("ui/forms/field").text_field(@name, :address1, object: @address) %>
-    <%= render component("ui/forms/field").text_field(@name, :address2, object: @address) %>
-    <div class="flex gap-4 w-full">
-      <%= render component("ui/forms/field").text_field(@name, :city, object: @address) %>
-      <%= render component("ui/forms/field").text_field(@name, :zipcode, object: @address) %>
-    </div>
-
-    <%= render component("ui/forms/field").select(
-      @name,
-      :country_id,
-      Spree::Country.all.map { |c| [c.name, c.id] },
-      object: @address,
-      value: @address.try(:country_id),
-      "data-#{stimulus_id}-target": "country",
-      "data-action": "change->#{stimulus_id}#loadStates"
-    ) %>
-
-    <%= content_tag(:div,
-      data: { "#{stimulus_id}-target": "stateNameWrapper" },
-      class: (@address.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
-        ) do %>
-      <%= render component("ui/forms/field").text_field(
-        @name,
-        :state_name,
-        object: @address,
-        value: @address.try(:state_name),
-        "data-#{stimulus_id}-target": "stateName"
-      ) %>
-    <% end %>
-    <input autocomplete="off" type="hidden" name=<%= "#{@name}[state_id]" %>>
-
-    <%= content_tag(:div,
-      data: { "#{stimulus_id}-target": "stateWrapper" },
-      class: (@address.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
-        ) do %>
-      <%= render component("ui/forms/field").select(
-        @name,
-        :state_id,
-        state_options,
-        object: @address,
-        value: @address.try(:state_id),
-        "data-#{stimulus_id}-target": "state"
-      ) %>
-    <% end %>
-
-    <%= render component("ui/forms/field").text_field(@name, :phone,  object: @address) %>
+    <%= fieldset %>
   </div>
 </fieldset>

data/app/components/solidus_admin/ui/forms/address/component.rb

@@ -1,14 +1,37 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Forms::Address::Component < SolidusAdmin::BaseComponent
-  def initialize(address:, name:, disabled: false)
-    @address = address
-    @name = name
+  DefaultNamedFieldsetNotFound = Class.new(NameError)
+
+  include SolidusAdmin::SlotableDefault
+
+  renders_one :fieldset
+
+  # @param fieldset [Symbol] use a default named fieldset, component of the same name must be defined
+  #   in "ui/forms/address/fieldsets"
+  # @param extends [Array<Symbol, Hash{Symbol => #call}>] extend default fieldset,
+  #   see +SolidusAdmin::UI::Forms::Address::Fieldsets::Base+
+  # @param excludes [Array<Symbol>, Symbol] optionally exclude fields that are present in a default fieldset
+  # @raise [DefaultNamedFieldsetNotFound] if the provided +:fieldset+ option does not correspond to a defined component
+  #   in "ui/forms/address/fieldsets"
+  def initialize(addressable:, form_field_name:, disabled: false, fieldset: :contact, extends: [], excludes: [])
     @disabled = disabled
+    @default_fieldset = fieldset_component(fieldset).new(
+      addressable:,
+      form_field_name:,
+      extends:,
+      excludes:
+    )
   end
 
-  def state_options
-    return [] unless @address.country
-    @address.country.states.map { |s| [s.name, s.id] }
+  attr_reader :default_fieldset
+
+  private
+
+  def fieldset_component(fieldset)
+    component("ui/forms/address/fieldsets/#{fieldset}")
+  rescue SolidusAdmin::ComponentRegistry::ComponentNotFoundError
+    raise DefaultNamedFieldsetNotFound,
+      "to use a default named fieldset `#{fieldset}` you must implement a component in 'ui/forms/address/fieldsets/#{fieldset}'"
   end
 end

data/app/components/solidus_admin/ui/forms/address/fields/city_and_zipcode/component.html.erb

@@ -0,0 +1,4 @@
+<div class="flex gap-4 w-full">
+  <%= render component("ui/forms/field").text_field(@form_field_name, :city, object: @addressable) %>
+  <%= render component("ui/forms/field").text_field(@form_field_name, :zipcode, object: @addressable) %>
+</div>

data/app/components/solidus_admin/ui/forms/address/fields/city_and_zipcode/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fields::CityAndZipcode::Component < SolidusAdmin::BaseComponent
+  def initialize(addressable:, form_field_name:)
+    @addressable = addressable
+    @form_field_name = form_field_name
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fields/country_and_state/component.html.erb

@@ -0,0 +1,39 @@
+<div class="flex flex-col gap-4 w-full" data-controller="<%= stimulus_id %>">
+  <%= render component("ui/forms/field").select(
+    @form_field_name,
+    :country_id,
+    Spree::Country.all.map { |c| [c.name, c.id] },
+    object: @addressable,
+    value: @addressable.try(:country_id),
+    "data-#{stimulus_id}-target": "country",
+    "data-action": "change->#{stimulus_id}#loadStates"
+  ) %>
+
+  <%= content_tag(:div,
+    data: { "#{stimulus_id}-target": "stateNameWrapper" },
+    class: (@addressable.country&.states&.empty? ? "flex flex-col gap-2 w-full" : "hidden flex flex-col gap-2 w-full")
+      ) do %>
+    <%= render component("ui/forms/field").text_field(
+      @form_field_name,
+      :state_name,
+      object: @addressable,
+      value: @addressable.try(:state_name),
+      "data-#{stimulus_id}-target": "stateName"
+    ) %>
+  <% end %>
+  <input autocomplete="off" type="hidden" name=<%= "#{@form_field_name}[state_id]" %>>
+
+  <%= content_tag(:div,
+    data: { "#{stimulus_id}-target": "stateWrapper" },
+    class: (@addressable.country&.states&.empty? ? "hidden flex flex-col gap-2 w-full" : "flex flex-col gap-2 w-full")
+      ) do %>
+    <%= render component("ui/forms/field").select(
+      @form_field_name,
+      :state_id,
+      state_options,
+      object: @addressable,
+      value: @addressable.try(:state_id),
+      "data-#{stimulus_id}-target": "state"
+    ) %>
+  <% end %>
+</div>

data/app/components/solidus_admin/ui/forms/address/{component.js → fields/country_and_state/component.js}

@@ -54,5 +54,7 @@ export default class extends Controller {
       option.innerText = state.name
       stateSelect.appendChild(option)
     })
+
+    stateSelect.setAttribute("synced", "false");
   }
 }

data/app/components/solidus_admin/ui/forms/address/fields/country_and_state/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fields::CountryAndState::Component < SolidusAdmin::BaseComponent
+  def initialize(addressable:, form_field_name:)
+    @addressable = addressable
+    @form_field_name = form_field_name
+  end
+
+  private
+
+  def state_options
+    return [] unless @addressable.country
+    @addressable.country.states.map { |s| [s.name, s.id] }
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fields/reverse_charge_fields/component.html.erb

@@ -0,0 +1,7 @@
+<%= render component("ui/forms/field").text_field(@form_field_name, :vat_id, object: @addressable) %>
+<%= render component("ui/forms/field").select(
+  @form_field_name,
+  :reverse_charge_status,
+  Spree::Address.reverse_charge_statuses.keys.map { |key| [I18n.t("spree.reverse_charge_statuses.#{key}"), key] },
+  object: @addressable
+) %>

data/app/components/solidus_admin/ui/forms/address/fields/reverse_charge_fields/component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fields::ReverseChargeFields::Component < SolidusAdmin::BaseComponent
+  def initialize(addressable:, form_field_name:)
+    @addressable = addressable
+    @form_field_name = form_field_name
+  end
+
+  def render?
+    Spree::Backend::Config.show_reverse_charge_fields
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fieldsets/base.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fieldsets::Base < SolidusAdmin::BaseComponent
+  renders_many :fields
+
+  # @param extends [Array<Hash{Symbol => #call}, Symbol>] Pass an array of extensions to modify existing default
+  #   fieldset with custom fields or override existing fields.
+  #   If extension is a Hash, its key should be the name of the field and its value should be an object that responds
+  #   to #call (e.g. proc or lambda) and returns a ViewComponent instance (or any object that responds to #render_in).
+  #
+  #   Since text inputs are often used as form fields, pass your field name as a Symbol and the component will render
+  #   a text input for that field.
+  # @example
+  #   component("ui/forms/address/fieldsets/contact").new(
+  #     extends: [
+  #       title: -> { component("ui/forms/field").select(...) }, # this will add a custom :title select field
+  #       name: -> { component("path/to/component").new }, # this will override existing default :name field
+  #       :company, # this will add a text field for :company
+  #     ],
+  #     excludes: %i[phone reverse_charge], # this will exclude :phone and :reverse_charge from the fieldset
+  #   )
+  def initialize(addressable:, form_field_name:, extends: [], excludes: [])
+    @addressable = addressable
+    @form_field_name = form_field_name
+    excludes = Array.wrap(excludes).map(&:to_sym)
+
+    extended_fields_map = extends.reduce({}) do |acc, extension|
+      if extension.is_a?(Hash)
+        acc.merge!(extension)
+      else
+        acc[extension.to_sym] = -> { text_field_component(extension) }
+        acc
+      end
+    end
+
+    fields_map.merge(extended_fields_map).each do |field_name, renderable|
+      with_field { render renderable.call } unless field_name.in?(excludes)
+    end
+  end
+
+  def fields_map
+    raise NotImplementedError, "fields_map must be implemented in #{self.class}"
+  end
+
+  def call
+    safe_join(fields)
+  end
+
+  private
+
+  def text_field_component(field_name)
+    component("ui/forms/field").text_field(@form_field_name, field_name.to_sym, object: @addressable)
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fieldsets/contact/component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fieldsets::Contact::Component < SolidusAdmin::UI::Forms::Address::Fieldsets::Base
+  def fields_map
+    {
+      name: -> { component("ui/forms/field").text_field(@form_field_name, :name, object: @addressable) },
+      street: -> { component("ui/forms/field").text_field(@form_field_name, :address1, object: @addressable) },
+      street_contd: -> { component("ui/forms/field").text_field(@form_field_name, :address2, object: @addressable) },
+      city_and_zipcode: -> { component("ui/forms/address/fields/city_and_zipcode").new(form_field_name: @form_field_name, addressable: @addressable) },
+      country_and_state: -> { component("ui/forms/address/fields/country_and_state").new(form_field_name: @form_field_name, addressable: @addressable) },
+      phone: -> { component("ui/forms/field").text_field(@form_field_name, :phone, object: @addressable) },
+      email: -> { component("ui/forms/field").text_field(@form_field_name, :email, object: @addressable) },
+      reverse_charge: -> { component("ui/forms/address/fields/reverse_charge_fields").new(form_field_name: @form_field_name, addressable: @addressable) }
+    }
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fieldsets/contact_info/component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fieldsets::ContactInfo::Component < SolidusAdmin::UI::Forms::Address::Fieldsets::Base
+  def fields_map
+    {
+      phone: -> { component("ui/forms/field").text_field(@form_field_name, :phone, object: @addressable) },
+      email: -> { component("ui/forms/field").text_field(@form_field_name, :email, object: @addressable) }
+    }
+  end
+end

data/app/components/solidus_admin/ui/forms/address/fieldsets/location/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class SolidusAdmin::UI::Forms::Address::Fieldsets::Location::Component < SolidusAdmin::UI::Forms::Address::Fieldsets::Base
+  def fields_map
+    {
+      street: -> { component("ui/forms/field").text_field(@form_field_name, :address1, object: @addressable) },
+      street_contd: -> { component("ui/forms/field").text_field(@form_field_name, :address2, object: @addressable) },
+      city_and_zipcode: -> { component("ui/forms/address/fields/city_and_zipcode").new(form_field_name: @form_field_name, addressable: @addressable) },
+      country_and_state: -> { component("ui/forms/address/fields/country_and_state").new(form_field_name: @form_field_name, addressable: @addressable) },
+      phone: -> { component("ui/forms/field").text_field(@form_field_name, :phone, object: @addressable) },
+      email: -> { component("ui/forms/field").text_field(@form_field_name, :email, object: @addressable) }
+    }
+  end
+end

data/app/components/solidus_admin/ui/forms/checkbox/component.html.erb

@@ -0,0 +1,14 @@
+<div class="flex gap-2 items-center">
+  <label class="flex gap-2 items-center">
+    <%= hidden_field_tag @name, "0" %>
+    <%= render component("ui/checkbox").new(
+      name: @name,
+      value: "1",
+      checked: @checked,
+      **@attributes
+    ) %>
+    <%= label %>
+  </label>
+
+  <%= hint if hint? %>
+</div>

data/app/components/solidus_admin/ui/forms/checkbox/component.rb

@@ -1,42 +1,35 @@
 # frozen_string_literal: true
 
 class SolidusAdmin::UI::Forms::Checkbox::Component < SolidusAdmin::BaseComponent
-  SIZES = {
-    s: 'w-4 h-4',
-    m: 'w-5 h-5',
+  FONT_WEIGHTS = {
+    normal: "font-normal",
+    semibold: "font-semibold"
   }.freeze
 
-  def initialize(size: :m, **attributes)
-    @size = size
-    @attributes = attributes
-  end
+  FONT_SIZES = {
+    xs: "text-xs",
+    s: "text-sm"
+  }.freeze
 
-  def call
-    tag.input(
-      type: 'checkbox',
+  renders_one :label, ->(text:, weight: :normal, size: :s, **options) do
+    tag.span(
+      text,
       class: "
-        #{SIZES.fetch(@size)}
-        form-checkbox
-        cursor-pointer
-        disabled:cursor-not-allowed
-
-        bg-white rounded border border-2 border-gray-300
-        hover:border-gray-700
-        focus:ring focus:ring-gray-300 focus:ring-0.5 focus:bg-white focus:ring-offset-0
-        active:ring active:ring-gray-300 active:ring-0.5
-        disabled:border-gray-300
-
-        indeterminate:border-gray-700 indeterminate:bg-gray-700 indeterminate:text-white
-        indeterminate:hover:border-gray-500 indeterminate:hover:bg-gray-500
-        indeterminate:focus:bg-gray-700
-        indeterminate:disabled:border-gray-300 indeterminate:disabled:bg-gray-300
-
-        checked:border-gray-700 checked:bg-gray-700 checked:text-white
-        checked:hover:border-gray-500 checked:hover:bg-gray-500
-        checked:focus:bg-gray-700
-        checked:disabled:border-gray-300 checked:disabled:bg-gray-300
+        #{FONT_WEIGHTS.fetch(weight)}
+        #{FONT_SIZES.fetch(size)}
+        #{options.delete(:classes)}
       ",
-      **@attributes,
+      **options
     )
   end
+
+  renders_one :hint, ->(text:, position: :above) do
+    render component("ui/toggletip").new(text:, position:)
+  end
+
+  def initialize(object_name:, method:, checked:, **attributes)
+    @name = "#{object_name}[#{method}]"
+    @checked = !!checked
+    @attributes = attributes
+  end
 end

data/app/components/solidus_admin/ui/forms/field/component.html.erb

@@ -2,7 +2,7 @@
   <div class="flex gap-1 items-center">
     <span class="
       text-gray-700
-      font-semibold text-xs
+      font-semibold
     "><%= @label %></span>
 
     <%= render component('ui/toggletip').new(text: @tip) if @tip.present? %>
@@ -18,12 +18,12 @@
 
   <% if @hint.present? || @error.present? %>
     <div class="
-      font-normal text-xs
+      font-normal
       [:disabled~&]:text-gray-300 text-gray-500
-      flex gap-1 flex-col
+      flex gap-1 flex-col [&>.error]:hidden [&>.error]:peer-invalid:block
     ">
       <%= tag.span @hint if @hint.present? %>
-      <%= tag.span safe_join(@error, tag.br), class: "text-red-600" if @error.present? %>
+      <%= tag.span safe_join(@error, tag.br), class: "error text-red-600" if @error.present? %>
     </div>
   <% end %>
 </label>