fluxbit_view_components 0.2.0 → 0.3.0

data/app/components/fluxbit/form/toggle_component.html.erb

@@ -0,0 +1,23 @@
+<%= content_tag :div, **@wrapper_html do %>
+  <label class="<%= label_class %>">
+    <%= if @invert_label
+      label
+    else
+      @other_label || (other_label if other_label?)
+    end %>
+
+    <% if @form.present? && @attribute.present? %>
+      <%= @form.check_box(@attribute, **@props) %>
+    <% else %>
+      <%= check_box_tag(@name, **@props) %>
+    <% end %>
+
+    <span class="<%= toggle_class %>"></span>
+    <%= if @invert_label
+      @other_label || (other_label if other_label?)
+    else
+      label
+    end %>
+  </label>
+  <%= help_text %>
+<% end %>

data/app/components/fluxbit/form/toggle_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+
+# The `Fluxbit::Form::ToggleComponent` renders a styled switch/toggle (on/off) input.
+# It supports custom label placement, color and sizing options, helper text, and is fully compatible
+# with Rails form builders. Additional options allow you to invert label order, customize colors
+# for checked/unchecked/button states, and provide an extra label via a slot.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::ToggleComponent.new(name: :enabled, label: "Enabled?")
+#
+# @see docs/03_Forms/Toggle.md For detailed documentation and examples.
+class Fluxbit::Form::ToggleComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::ToggleComponent
+
+  renders_one :other_label, "Fluxbit::Form::LabelComponent"
+
+  # Initializes the toggle component with the given properties.
+  #
+  # @param form [ActionView::Helpers::FormBuilder] The form builder (optional, for Rails forms)
+  # @param attribute [Symbol] The model attribute to be used in the form (required if using form builder)
+  # @param id [String] The id of the input element (optional)
+  # @param label [String] The label for the input field (optional)
+  # @param help_text [String] Additional help text for the input field (optional)
+  # @param helper_popover [String] Content for a popover helper (optional)
+  # @param helper_popover_placement [String] Placement of the popover (default: "right")
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param other_label [String] Additional label, rendered via slot (optional)
+  # @param sizing [Integer] Size index for the toggle (default: config)
+  # @param color [Symbol] Checked toggle color (:default, :success, :failure, :info, :warning, etc)
+  # @param unchecked_color [Symbol] Unchecked toggle color (see config)
+  # @param button_color [Symbol] Color for the toggle button
+  # @param invert_label [Boolean] If true, inverts label/toggle order (default: config)
+  # @param disabled [Boolean] Disables the toggle if true
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by <input type="checkbox">
+  def initialize(**props)
+    super(**props)
+
+    @other_label = props.delete(:other_label)
+    @sizing = @props.delete(:sizing) || @@sizing
+    @sizing = (styles[:toggle][:sizes].count - 1) if @sizing > (styles[:toggle][:sizes].count - 1)
+    @color = valid_color(@props.delete(:color))
+    @unchecked_color = options(
+      @props.delete(:unchecked_color),
+      collection: styles[:toggle][:unchecked].keys,
+      default: @@unchecked_color
+    )
+    @button_color = options(@props.delete(:button_color), collection: styles[:toggle][:button].keys, default: @@button_color)
+    @invert_label = options(@props.delete(:invert_label), collection: [ true, false ], default: @@invert_label)
+
+    add to: @props, first_element: true, class: styles[:input]
+  end
+
+  def valid_color(color)
+    return color if styles[:toggle][:checked].key?(color)
+    return :failure if errors.present?
+
+    @@color
+  end
+
+  def label_class
+    styles[:label]
+  end
+
+  def input_class
+    styles[:input]
+  end
+
+  def toggle_class
+    [
+      (@invert_label || @other_label || other_label?) ? styles[:toggle][:invert_label] : nil,
+      styles[:toggle][:base],
+      styles[:toggle][:unchecked][@unchecked_color],
+      styles[:toggle][:checked][@color],
+      styles[:toggle][:button][@button_color],
+      styles[:toggle][:sizes][@sizing],
+      styles[:toggle][:active][(@props[:disabled] ? :off : :on)]
+    ].compact.join(" ")
+  end
+end

data/app/components/fluxbit/form/upload_image_component.html.erb

@@ -0,0 +1,50 @@
+<%= content_tag :div, **@wrapper_html do %>
+  <div id="<%= id %>" class="mt-6 grow lg:mt-0 lg:ml-6 lg:shrink-0 lg:grow-0">
+    <%= label %>
+    <div class="mt-1 lg:hidden">
+      <div class="flex items-center">
+        <div class="inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+          <%= image_element %>
+        </div>
+        <div class="ml-5 rounded-md shadow-xs">
+          <div class="group relative flex items-center justify-center rounded-md border border-slate-300 py-2 px-3 focus-within:ring-2 focus-within:ring-sky-500 focus-within:ring-offset-2 hover:bg-slate-50">
+            <label for="mobile-<%= id %>" class="pointer-events-none relative text-sm font-medium leading-4 text-slate-700">
+              <span><%= @title %></span>
+              <span class="sr-only"><%= @label %></span>
+            </label>
+            <%= input_element(input_id: "mobile-#{id}") %>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative hidden overflow-hidden rounded-full lg:block w-40">
+      <div class="inline-block h-40 w-40 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+        <%= image_element %>
+      </div>
+      <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col h-full w-full items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+        </svg>
+        <span><%= @title %></span>
+        <span class="sr-only"><%= @label %></span>
+        <%= input_element(input_id: "desktop-#{id}") %>
+      </label>
+    </div>
+    <%= help_text %>
+  </div>
+
+  <script>
+    function loadFile(event, id) {
+      const images = document.querySelectorAll('.img_photo_' + id);
+      if (event.target.files && event.target.files[0]) {
+        images.forEach(function(img) {
+          img.src = URL.createObjectURL(event.target.files[0]);
+          img.onload = function() {
+            URL.revokeObjectURL(img.src);
+          }
+        });
+      }
+    }
+  </script>
+<% end %>

data/app/components/fluxbit/form/upload_image_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::UploadImageComponent` renders a stylized image upload field with live preview,
+# drag-and-drop UI, support for both mobile and desktop layouts, labels, helper text, and integration
+# with Rails form builders and Active Storage attachments. It provides custom title/subtitle, placeholder,
+# and image preview, and is fully configurable via props.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::UploadImageComponent.new(attribute: :avatar, label: "Profile photo")
+#
+# @see docs/03_Forms/UploadImage.md For detailed documentation and examples.
+class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
+  # Initializes the upload image component with the given properties.
+  #
+  # @param form [ActionView::Helpers::FormBuilder] The form builder (optional, for Rails forms)
+  # @param attribute [Symbol] The model attribute to be used in the form (required if using form builder)
+  # @param id [String] The id of the input element (optional)
+  # @param label [String] The label for the input field (optional)
+  # @param help_text [String] Additional help text for the input field (optional)
+  # @param helper_popover [String] Content for a popover helper (optional)
+  # @param helper_popover_placement [String] Placement of the popover (default: "right")
+  # @param image_path [String] Path to the image to be displayed (optional)
+  # @param image_placeholder [String] Placeholder image path if no image is attached (optional)
+  # @param title [Boolean, String] Whether to show a title (true for default, false to hide, or custom string)
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by file_field_tag
+  def initialize(**props)
+    super(**props)
+    @title = @props.delete(:title) || "Change"
+    @image_path = @props.delete(:image_path) ||
+      (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
+        @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
+       end) || @props.delete(:image_placeholder) || ""
+
+    @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+  end
+
+  def input_element(input_id: nil)
+    @props["onchange"] = "loadFile(event, '#{id}')"
+    return file_field_tag @name, @props.merge(id: input_id || id) if @form.nil?
+
+    @form.file_field(@attribute, **@props, id: input_id || id)
+  end
+
+  def image_element
+    image_tag @image_path,
+              class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full object-cover rounded-full",
+              alt: @attribute&.to_s&.humanize
+  end
+end

data/app/helpers/fluxbit/components_helper.rb

@@ -3,33 +3,33 @@
 module Fluxbit
   module ComponentsHelper
     # Components
-    def fx_avatar(...) = fluxbit_method("Avatar", ...)
-    def fx_avatar_group(...) = fluxbit_method("AvatarGroup", ...)
-    def fx_gravatar(...) = fluxbit_method("Gravatar", ...)
-    def fx_alert(...) = fluxbit_method("Alert", ...)
-    def fx_button(...) = fluxbit_method("Button", ...)
-    def fx_button_group(...) = fluxbit_method("ButtonGroup", ...)
-    def fx_badge(...) = fluxbit_method("Badge", ...)
-    def fx_card(...) = fluxbit_method("Card", ...)
-    def fx_modal(...) = fluxbit_method("Modal", ...)
-    def fx_popover(...) = fluxbit_method("Popover", ...)
-    def fx_tooltip(...) = fluxbit_method("Tooltip", ...)
-    def fx_flex(...) = fluxbit_method("Flex", ...)
-    def fx_tab(...) = fluxbit_method("Tab", ...)
+    [ :avatar, :avatar_group, :gravatar, :alert, :button, :button_group,
+      :badge, :card, :modal, :popover, :tooltip, :flex, :tab ].each do |component|
+      define_method("fx_#{component}") do |*args, **kwargs, &block|
+        fluxbit_method(component.to_s.camelize, *args, **kwargs, &block)
+      end
+    end
 
     # Forms
-    def fx_helper_text(...) = fluxbit_method("Form::HelperText", ...)
-    def fx_checkbox_input(...) = fluxbit_method("Form::CheckboxInput", ...)
-    def fx_form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
-    def fx_label(...) = fluxbit_method("Form::Label", ...)
-    def fx_range_input(...) = fluxbit_method("Form::RangeInput", ...)
-    def fx_select_input(...) = fluxbit_method("Form::SelectInput", ...)
-    def fx_select_free_input(...) = fluxbit_method("Form::SelectFreeInput", ...)
-    def fx_text_input(...) = fluxbit_method("Form::TextInput", ...)
-    def fx_textarea_input(...) = fluxbit_method("Form::TextareaInput", ...)
-    def fx_toggle_input(...) = fluxbit_method("Form::ToggleInput", ...)
+    [ :help_text, :check_box, :form_builder, :label, :range,
+      :select, :toggle, :upload_image, :dropzone ].each do |component|
+      define_method("fx_#{component}") do |*args, **kwargs, &block|
+        fluxbit_method("Form::#{component.to_s.camelize}", *args, **kwargs, &block)
+      end
+    end
     def form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
 
+    Fluxbit::Form::TextFieldComponent::TYPE_OPTIONS.each do |type|
+      define_method(type.in?([ :text_area, :textarea ]) ? "fx_#{type}" : "fx_#{type}_field") do |*args, **kwargs, &block|
+        fluxbit_method("Form::TextField", *args, type: type, **kwargs, &block)
+      end
+    end
+
+    Fluxbit::Form::CheckBoxComponent::TYPE_OPTIONS.each do |type|
+      define_method("fx_#{type}") do |*args, **kwargs, &block|
+        fluxbit_method("Form::CheckBox", *args, type: type, **kwargs, &block)
+      end
+    end
     # Typography
     def fx_heading(...) = fluxbit_method("Heading", ...)
     def fx_txt(...) = fluxbit_method("Text", ...)
@@ -43,33 +43,5 @@ module Fluxbit
         render(component_klass.new(*args, **kwargs), &c)
       end
     end
-
-    # # Succint method for render component
-    # # from: https://dev.to/abeidahmed/advanced-viewcomponent-patterns-in-rails-2b4m
-    # #
-    # # Instead of using 'render XComponent'
-    # # One can use 'render_component "X", **@options'
-    # def render_component(component_path, collection: nil, with_content: nil, **options, &block)
-    #   component_klass = "#{component_path.classify}Component".constantize
-
-    #   return render component_klass.new(**options).with_content(with_content) if with_content
-
-    #   if collection
-    #     render component_klass.with_collection(collection, **options), &block
-    #   else
-    #     render component_klass.new(**options), &block
-    #   end
-    # end
-
-    # def method_missing(name, *args, &block)
-    #   if name == :alert
-    #     render component_klass.new(**options), &block
-    #     # do something if the method name is "custom_helper_method"
-    #     #content_tag(:div, *args, &block)
-    #   else
-    #     # call the original method_missing method if the method name is not recognized
-    #     super
-    #   end
-    # end
   end
 end

data/app/helpers/fluxbit/form_builder.rb

@@ -0,0 +1,87 @@
+module Fluxbit
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    include ActionView::Helpers::OutputSafetyHelper
+
+    attr_reader :template
+
+    delegate :render, :pluralize, to: :template
+
+    def errors_summary(within: :container)
+      return if object.blank?
+      return unless object.errors.any?
+
+      title = I18n.t(
+        "polaris.form_builder.errors_summary",
+        count: object.errors.count,
+        model: object.class.model_name.human.downcase
+      )
+
+      render Fluxbit::BannerComponent.new(
+        title: title,
+        status: :critical,
+        within: within,
+        data: { errors_summary: true }
+      ) do |banner|
+        [
+          render(Fluxbit::ListComponent.new) do |list|
+            object.errors.full_messages.each do |error|
+              list.with_item { error.html_safe }
+            end
+          end,
+          (template.capture { yield(banner) } if block_given?)
+        ].compact.join.html_safe
+      end
+    end
+
+    def error_for(method)
+      return if object.blank?
+      return unless object.errors.key?(method)
+
+      raw object.errors.full_messages_for(method)&.first
+    end
+
+    def fluxbit_inline_error_for(method, **options, &block)
+      error_message = error_for(method)
+      return unless error_message
+
+      render(Fluxbit::InlineErrorComponent.new(**options, &block)) do
+        error_message
+      end
+    end
+
+    Fluxbit::Form::TextFieldComponent::TYPE_OPTIONS.each do |type|
+      define_method(type.in?([ :text_area, :textarea ]) ? "fx_#{type}" : "fx_#{type}_field") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        render Fluxbit::Form::TextFieldComponent.new(form: self, type: type, attribute: method, **options), &block
+      end
+    end
+
+    Fluxbit::Form::CheckBoxComponent::TYPE_OPTIONS.each do |type|
+      define_method("fx_#{type}") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        render Fluxbit::Form::CheckBoxComponent.new(form: self, type: type, attribute: method, **options), &block
+      end
+    end
+
+    [ :range, :toggle, :upload_image, :dropzone ].each do |component|
+      define_method("fx_#{component}") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        klass = "Fluxbit::Form::#{component.to_s.camelize}Component".constantize
+        render klass.new(form: self, attribute: method, **options), &block
+      end
+    end
+
+    # select(object, method, choices = nil, options = {}, html_options = {}, &block) public
+    def fx_select(method, **options, &block)
+      options[:error] ||= error_for(method)
+      options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+      value = object&.public_send(method)
+      options[:selected] = value if value.present?
+
+      render Fluxbit::Form::SelectComponent.new(form: self, attribute: method, **options, &block)
+    end
+  end
+end

data/lib/fluxbit/config/form/check_box_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::CheckBoxComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      checkbox: "rounded-sm",
+      base: "w-4 h-4 text-blue-600 bg-slate-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600",
+      label: {
+        with_helper: "font-medium text-slate-900 dark:text-slate-300",
+        base: "ml-2 text-sm font-medium text-slate-900 dark:text-slate-300"
+      },
+      input_div: "flex items-center h-5",
+      helper_div: "ml-2 text-sm",
+      no_helper_div: "flex items-center"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/dropzone_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::DropzoneComponent
+  mattr_accessor :icon, default: "heroicons_outline:cloud-arrow-up"
+  mattr_accessor :height, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "flex items-center justify-center w-full",
+      label: "flex flex-col items-center justify-center w-full border-2 border-slate-300 border-dashed rounded-lg cursor-pointer bg-slate-50 dark:hover:bg-bray-800 dark:bg-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:hover:border-slate-500 dark:hover:bg-slate-600",
+      inner_div: "flex flex-col items-center justify-center pt-5 pb-6",
+      title: "mb-2 text-sm text-slate-500 dark:text-slate-400",
+      subtitle: "text-xs text-slate-500 dark:text-slate-400",
+      icon: "w-10 h-10 mb-4 text-slate-500 dark:text-slate-400",
+      height: [ "", "h-32", "h-64", "h-96" ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/{helper_text_component.rb → help_text_component.rb}

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Fluxbit::Config::Form::HelperTextComponent
+module Fluxbit::Config::Form::HelpTextComponent
   mattr_accessor :color, default: :default
 
   # rubocop: disable Layout/LineLength, Metrics/BlockLength

data/lib/fluxbit/config/form/label_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::LabelComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :helper_popover_icon, default: "heroicons_solid:question-mark-circle"
+  mattr_accessor :helper_popover_icon_class, default: "w-4 h-4"
+  mattr_accessor :sizing, default: 1
+  mattr_accessor :helper_popover_placement, default: "right"
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "flex font-medium",
+      colors: {
+        default: "text-gray-900 dark:text-white",
+        success: "text-green-700 dark:text-green-500",
+        failure: "text-red-700 dark:text-red-500",
+        info: "text-cyan-500 dark:text-cyan-600",
+        warning: "text-yellow-500 dark:text-yellow-600"
+      },
+      sizes: [
+        "text-sm",
+        "text-md",
+        "text-lg"
+      ],
+      helper_popover: "px-2 text-slate-400"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/range_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::RangeComponent
+  mattr_accessor :vertical, default: false
+  mattr_accessor :sizing, default: 1
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "w-full bg-slate-200 rounded-lg appearance-none cursor-pointer dark:bg-slate-700",
+      sizes: [ "h-1 range-sm", "h-2", "h-3 range-lg" ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/text_field_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::TextFieldComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :sizing, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      default: "mt-1 block w-full border disabled:cursor-not-allowed disabled:opacity-50 disabled:text-slate-900 disabled:dark:text-slate-400 disabled:bg-slate-100 disabled:dark:bg-slate-700",
+      text: {
+        default: "text-slate-900 dark:text-white",
+        success: "text-green-900",
+        failure: "text-red-900",
+        info: "text-cyan-900",
+        warning: "text-yellow-900"
+      },
+      ring: {
+        default: "focus:ring-blue-500 dark:focus:ring-blue-500",
+        success: "focus:ring-green-500",
+        failure: "focus:ring-red-500",
+        info: "focus:ring-cyan-500",
+        warning: "focus:ring-yellow-500"
+      },
+      bg: {
+        default: "bg-slate-50 dark:bg-slate-700",
+        success: "bg-green-50 dark:bg-green-100",
+        failure: "bg-red-50 dark:bg-red-100",
+        info: "bg-cyan-50 dark:bg-cyan-100",
+        warning: "bg-yellow-50 dark:bg-yellow-100"
+      },
+      placeholder: {
+        default: "dark:placeholder-slate-400",
+        success: "placeholder-green-700",
+        failure: "placeholder-red-700",
+        info: "placeholder-cyan-700",
+        warning: "placeholder-yellow-700"
+      },
+      border: {
+        default: "border-slate-300 focus:border-blue-500 dark:border-slate-600 dark:focus:border-blue-500",
+        success: "border-green-500 focus:border-green-500 dark:border-green-400",
+        failure: "border-red-500 focus:border-red-500 dark:border-red-400",
+        info: "border-cyan-500 focus:border-cyan-500 dark:border-cyan-400",
+        warning: "border-yellow-500 focus:border-yellow-500 dark:border-yellow-400"
+      },
+      shadow: "shadow-xs dark:shadow-xs-light",
+      icon: "pl-10",
+      right_icon: "pr-10",
+      sizing_md_addon: "p-2.5 rounded-none rounded-r-lg flex-1 min-w-0 text-sm",
+      sizes: [
+        "p-2.5 text-sm rounded-lg",
+        "p-4 sm:text-md rounded-lg",
+        "p-2 rounded-lg sm:text-xs"
+      ],
+      additional_icons: {
+        class: {
+          default: "mt-1 w-4 h-4 text-slate-500 dark:text-slate-400",
+          success: "mt-1 w-4 h-4 text-green-500 dark:text-green-400",
+          failure: "mt-1 w-4 h-4 text-red-500 dark:text-red-400",
+          info: "mt-1 w-4 h-4 text-cyan-500 dark:text-cyan-400",
+          warning: "mt-1 w-4 h-4 text-yellow-500 dark:text-yellow-400"
+        },
+        icon: "absolute inset-y-0 left-0 flex items-center pl-3",
+        right_icon: "absolute inset-y-0 right-0 flex items-center pr-3",
+        addon: {
+          default: "mt-1 inline-flex items-center px-3 text-sm text-slate-900 bg-slate-200 border border-r-0 border-slate-300 rounded-l-md dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600",
+          success: "mt-1 inline-flex items-center px-3 text-sm text-green-900 bg-green-200 border border-r-0 border-green-300 rounded-l-md dark:bg-green-600 dark:text-green-400 dark:border-green-600",
+          failure: "mt-1 inline-flex items-center px-3 text-sm text-red-900 bg-red-200 border border-r-0 border-red-300 rounded-l-md dark:bg-red-600 dark:text-red-400 dark:border-red-600",
+          info: "mt-1 inline-flex items-center px-3 text-sm text-cyan-900 bg-cyan-200 border border-r-0 border-cyan-300 rounded-l-md dark:bg-cyan-600 dark:text-cyan-400 dark:border-cyan-600",
+          warning: "mt-1 inline-flex items-center px-3 text-sm text-yellow-900 bg-yellow-200 border border-r-0 border-yellow-300 rounded-l-md dark:bg-yellow-600 dark:text-yellow-400 dark:border-yellow-600"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end