fluxbit_view_components 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fbaf175424393a228d6fc82018fcd81b93dc388df861dd8afc1fb4ce0ab901b1
-  data.tar.gz: '0728a9d9f386fcb06bf8e21898e39c0cf58a9b2f44763acfb6fe591d251f2600'
+  metadata.gz: 5f5ca4fde5d32556cdbc0f25088912fa549531dea43e9e46557806c742a61a3c
+  data.tar.gz: 2feca2ea7274688b6d1e850aee6dc6d5638718718584e977514f0abf96cedd8e
 SHA512:
-  metadata.gz: 618572080999a095ed82ed77875fae33507d208c5c0abbca39bd410742502e651215f3f7c5cedab195baf0d2a486aaa5ce45fcc4910646ab7806f33454c6d98f
-  data.tar.gz: e1e05c2e0445d8c9f92bae5f3580e3f08f235c65b0bab273538ca45acd3f07df2e2e35429934178883682c89ace072816010c79ae2ac435b6b9892894356a420
+  metadata.gz: 85ef792f0b9ead019bf89459531723043c7b771fe7b6c8f016ba03697d2e80d93139a081e0f4250d46545eb97b31f159fcaa9ba2bd5592c27053a0792c8063f5
+  data.tar.gz: da59d2153f6ea5bb116ee44ae2dd7fd8cd8631c9024ebe7972d5103eb58f1fc05012953386d4520aed4247970dc00fc810ede2afc08a0ecc8329db053b3d5cb6

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::CheckBoxComponent` is a form input component for check boxes and radio buttons.
+# It extends `Fluxbit::Form::FieldComponent` and provides a styled checkbox/radio with label, helper text,
+# and support for different visual states and groupings. It automatically adds the correct styles for both
+# checkbox and radio types and works with or without Rails form builders.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::CheckBoxComponent.new(name: :accept_terms, label: "Accept the terms")
+#
+# @see docs/03_Forms/CheckBox.md For detailed documentation and examples.
+class Fluxbit::Form::CheckBoxComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::CheckBoxComponent
+  TYPE_DEFAULT = :check_box
+  TYPE_OPTIONS = %i[check_box checkbox radio_button].freeze
+
+  # Initializes the check box component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label text next to the input (optional)
+  # @param value [String] Value for the field (optional)
+  # @param type [String, Symbol] Input type (`"check_box"`, `"checkbox"`, `"radio_button"`)
+  # @param help_text [String] Helper or error text below the field
+  # @param disabled [Boolean] Disables the input if true
+  # @param checked [Boolean] Marks the input as checked if true
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by check_box_tag/radio_button_tag
+  def initialize(**props)
+    super(**props)
+    @type = options(@props.delete(:type), collection: TYPE_OPTIONS, default: TYPE_DEFAULT)
+    add(class: styles[:checkbox], to: @props, first_element: true) if @props[:type] == "checkbox"
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def input
+    if @form.present? && @attribute.present?
+      @form.public_send(@type, @attribute, @props)
+    else
+      public_send("#{@type}_tag", @name, @value, @props)
+    end
+  end
+
+  def call
+    if @help_text
+      content_tag :div, { class: "flex" } do
+        concat content_tag(:div, input, { class: styles[:input_div] })
+        concat content_tag(:div, safe_join([ label, help_text ]), { class: styles[:helper_div] })
+      end
+    else
+      content_tag :div, { class: styles[:no_helper_div] } do
+        concat input
+        concat label
+      end
+    end
+  end
+end

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

@@ -6,32 +6,32 @@ class Fluxbit::Form::Component < Fluxbit::Component
     return @id ||= random_id if @props[:id].nil? && @form.nil?
     return @props[:id] unless @props[:id].nil?
 
-    "#{@form.object_name}_#{@field}"
+    "#{@form.object_name}_#{@attribute}"
   end
 
-  def define_helper_text(helper_text, object, field)
-    return nil if helper_text.is_a? FalseClass
+  def define_help_text(help_text, object, attribute)
+    return nil if help_text.is_a? FalseClass
 
-    if helper_text.nil? && !object.nil? && !field.nil?
-      helper_text = I18n.t(
-        field,
-        scope: [ :activerecord, :helper_text, object.class.name.underscore.to_sym ],
+    if help_text.nil? && !object.nil? && !attribute.nil?
+      help_text = I18n.t(
+        attribute,
+        scope: [ :activerecord, :help_text, object.class.name.underscore.to_sym ],
         default: nil
       )
     end
 
-    (helper_text.is_a?(Array) ? helper_text : [ helper_text ]) + errors
+    (help_text.is_a?(Array) ? help_text : [ help_text ]) + errors
   end
 
-  def define_helper_popover(helper_popover, object, field)
+  def define_helper_popover(helper_popover, object, attribute)
     return helper_popover if (helper_popover != false && !helper_popover.nil?) || object.nil?
 
     object_name = object.class.name.underscore.to_sym
-    I18n.t(field, scope: [ :activerecord, :helper_popover, object_name ], default: nil)
+    I18n.t(attribute, scope: [ :activerecord, :helper_popover, object_name ], default: nil)
   end
 
-  def label_value(label, object, field, id)
-    return object.class.human_attribute_name(field) if label.nil? && !object.nil? && !field.nil?
+  def label_value(label, object, attribute, id)
+    return object.class.human_attribute_name(attribute) if label.nil? && !object.nil? && !attribute.nil?
     return id.to_s.humanize if label.nil? && !id.nil?
     return label unless label.nil?
 
@@ -53,20 +53,14 @@ class Fluxbit::Form::Component < Fluxbit::Component
   def errors
     return [] unless @object&.errors&.any?
 
-    @object.errors.filter { |f| f.attribute == @field }.map(&:full_message)
+    @object.errors.filter { |f| f.attribute == @attribute }.map(&:full_message)
   end
 
-  def helper_text
-    return "" if @helper_text.blank?
+  def help_text
+    return "" if @help_text.blank? || @help_text.compact.blank?
 
-    # safe_join(
-    #   @helper_text.compact.map do |text|
-    #     Fluxbit::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    #   end
-    # )
-
-    @helper_text.compact.map do |text|
-      concat Fluxbit::Form::HelperTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    end
+    @help_text.compact.map do |text|
+      Fluxbit::Form::HelpTextComponent.new(color: @color).with_content(text).render_in(view_context)
+    end.join.html_safe
   end
 end

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

@@ -0,0 +1,39 @@
+<%= content_tag :div, **@wrapper_html do %>
+<div class="<%= self.styles[:base] %>">
+  <label for="<%= id %>" class="<%= self.styles[:label] %> <%= self.styles[:height][@height] %>">
+    <div class="<%= self.styles[:inner_div] %>">
+      <% if content? %>
+        <%= content %>
+      <% else %>
+        <%= create_icon %>
+
+        <% if @title != false %>
+          <p class="<%= self.styles[:title] %>">
+            <% if @title != true %>
+              <%= @title %>
+            <% else %>
+              <span class="font-semibold">Click to upload</span> or drag and drop
+            <% end %>
+          </p>
+        <% end %>
+
+        <% if @subtitle != false %>
+          <p class="<%= self.styles[:subtitle] %>">
+            <% if @subtitle != true %>
+              <%= @subtitle %>
+            <% else %>
+              SVG, PNG, JPG or GIF (MAX. 800x400px)
+            <% end %>
+          </p>
+        <% end %>
+      <% end %>
+    </div>
+    <% if @form.present? && @attribute.present? %>
+      <%= @form.file_field(@attribute, **@props) %>
+    <% else %>
+      <%= file_field_tag(@name, **@props) %>
+    <% end %>
+  </label>
+</div>
+<%= help_text %>
+<% end %>

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::DropzoneComponent` provides a drag-and-drop file input zone with support for labels,
+# titles, subtitles, icons, validation states, and integration with Rails form builders.
+# It renders a visually rich area that lets users drag files or click to select a file, and is fully customizable
+# via its options and slot for custom content.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::DropzoneComponent.new(name: :avatar)
+#
+# @see docs/03_Forms/Dropzone.md For detailed documentation and examples.
+class Fluxbit::Form::DropzoneComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::DropzoneComponent
+
+  # Initializes the dropzone component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label for the input (optional)
+  # @param title [Boolean, String] Title text above the dropzone (true for default, false to hide, or custom string)
+  # @param subtitle [Boolean, String] Subtitle text below the title (true for default, false to hide, or custom string)
+  # @param icon [String, Symbol] Icon to display above the title (defaults to config)
+  # @param icon_props [Hash] Extra props for the icon element
+  # @param height [Integer] Height preset (0: auto, 1: h-32, 2: h-64, 3: h-96; default is 0)
+  # @param help_text [String] Helper or error text below the field
+  # @param ... any other HTML attribute supported by file_field_tag
+  def initialize(**props)
+    super(**props)
+    @title = options(@props.delete(:title), default: true)
+    @subtitle = options(@props.delete(:subtitle), default: true)
+    @icon = @props.delete(:icon) || @@icon
+    @icon_props = @props.delete(:icon_props) || { class: styles[:icon] }
+    @height = @props.delete(:height) || @@height
+    add to: @props, class: "hidden"
+  end
+
+  def create_icon
+    anyicon(icon: @icon, class: styles[:icon])
+  end
+end

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::FieldComponent < Fluxbit::Form::Component
+  def initialize(**props)
+    super
+    @props = props
+    @form = @props.delete(:form)
+    @attribute = @props.delete(:attribute)
+    @name = @props.delete(:name) || (@attribute if @form.present?)
+    @value = @props.delete(:value)
+    @id = @props.delete(:id)
+
+    @object = @form&.object
+    @help_text = define_help_text(props.delete(:help_text), @object, @attribute)
+    @helper_popover = define_helper_popover(props.delete(:helper_popover), @object, @attribute)
+    @helper_popover_placement = props.delete(:helper_popover_placement) || "right"
+    @label = label_value(props.delete(:label), @object, @attribute, @id)
+    @wrapper_html = props.delete(:wrapper_html) || {}
+    define_wrapper_options
+  end
+
+  def define_wrapper_options
+    add(to: @wrapper_html, class: "required") if @props[:required].present?
+    add(to: @wrapper_html, class: @name) if @name.present?
+  end
+end

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

@@ -89,7 +89,7 @@ class Fluxbit::Form::FormBuilderComponent < Fluxbit::Component
   end
 
   def element_type(type)
-    return "TextInput" if type.nil? || type.to_s.in?(TEXT_TYPES)
+    return "TextField" if type.nil? || type.to_s.in?(TEXT_TYPES)
     return type.to_s.concat("_input").camelcase if type.to_s.in?(INPUT_TYPES)
 
     case type

data/app/components/fluxbit/form/{helper_text_component.rb → help_text_component.rb}

@@ -1,11 +1,16 @@
 # frozen_string_literal: true
 
-# The `Fluxbit::HelperTextComponent` is a component for rendering customizable helper text elements.
+# The `Fluxbit::HelpTextComponent` is a component for rendering customizable helper text elements.
 # It extends `Fluxbit::Component` and provides options for configuring the helper text's
 # appearance and behavior. You can control the helper text's color and other attributes.
 # The helper text can have various styles applied based on the provided properties.
-class Fluxbit::Form::HelperTextComponent < Fluxbit::Form::Component
-  include Fluxbit::Config::Form::HelperTextComponent
+#
+# @example Basic usage
+#   = render Fluxbit::Form::HelpTextComponent.new { "Your password must be at least 8 characters." }
+#
+# @see docs/03_Forms/HelpText.md For detailed documentation and examples.
+class Fluxbit::Form::HelpTextComponent < Fluxbit::Form::Component
+  include Fluxbit::Config::Form::HelpTextComponent
 
   # Initializes the helper text component with the given properties.
   #

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

@@ -1,36 +1,39 @@
 # frozen_string_literal: true
 
+# The `Fluxbit::Form::LabelComponent` is a flexible and accessible label for form fields.
+# It supports custom content, helper popovers, multiple color styles, sizing options, and
+# displays associated help text when provided. It is fully compatible with Rails form builders.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::LabelComponent.new(with_content: "Your Name")
+#
+# @see docs/03_Forms/Label.md For detailed documentation and examples.
 class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
-  cattr_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: {
-        sm: "text-sm",
-        md: "text-md",
-        lg: "text-lg"
-      },
-      helper_popover: "px-2 text-slate-400"
-    }
-  end
+  include Fluxbit::Config::Form::LabelComponent
 
-  def initialize(color: :default, form: nil, with_content: nil, helper_text: nil,
-                 sizing: :sm, helper_popover: nil, helper_popover_placement: "right", **props)
+  # Initializes the label component with the given properties.
+  #
+  # @param with_content [String] The label text to display (alternative to block content)
+  # @param help_text [String, Array<String>] One or more help text messages to render below the label
+  # @param helper_popover [String] Popover content shown on icon hover
+  # @param helper_popover_placement [String] Placement of the popover (default: "right")
+  # @param sizing [Integer] Size index for label text (default: config default)
+  # @param color [Symbol] Label color (:default, :success, :failure, :info, :warning)
+  # @param class [String] Additional CSS classes for the label element
+  # @param ... any other HTML attribute supported by the <label> tag
+  def initialize(**props)
     super
     @props = props
-    @sizing = sizing.in?(styles[:sizes].keys) ? sizing : :sm
-    @with_content = with_content
-    @helper_text = helper_text.is_a?(Array) ? helper_text : [ helper_text ]
-    @helper_popover = helper_popover
-    @helper_popover_placement = helper_popover_placement
-    color = :default unless color.in? %i[info default success failure warning]
-    add class: styles[:colors][color], to: @props, first_element: true
+    @with_content = @props.delete(:with_content)
+    @help_text = @props.delete(:help_text)
+    @help_text = [ @help_text ] if !@help_text.is_a?(Array)
+    @helper_popover = @props.delete(:helper_popover)
+    @helper_popover_placement = @props.delete(:helper_popover_placement) || @@helper_popover_placement
+    @sizing = @props[:sizing].to_i || @@sizing
+    @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
+    @color = options(@props.delete(:color), collection: styles[:colors], default: @@color)
+
+    add class: styles[:colors][@color], to: @props, first_element: true
     add class: styles[:base], to: @props, first_element: true
     add class: styles[:sizes][@sizing], to: @props, first_element: true
   end
@@ -39,7 +42,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     return "" if @helper_popover.nil?
 
     content_tag :span,
-                anyicon(icon: "heroicons_solid:question-mark-circle", class: "w-4 h-4"),
+                anyicon(icon: @@helper_popover_icon, class: @@helper_popover_icon_class),
                 {
                   "data-popover-placement": @helper_popover_placement,
                   "data-popover-target": target,
@@ -57,7 +60,7 @@ class Fluxbit::Form::LabelComponent < Fluxbit::Form::Component
     safe_join(
       [
         content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
-        helper_text,
+        help_text,
         render_popover
       ]
     )

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::RangeComponent` renders a styled range slider for selecting numeric values within a range.
+# It supports vertical and horizontal orientation, sizing options, helper text, labels, and full compatibility with Rails form builders.
+# Custom classes and HTML attributes can be passed for further styling and control.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::RangeComponent.new(name: :volume, label: "Volume")
+#
+# @see docs/03_Forms/Range.md For detailed documentation and examples.
+class Fluxbit::Form::RangeComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::RangeComponent
+
+  # Initializes the range component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label for the input (optional)
+  # @param value [Numeric] Value for the range input (optional)
+  # @param min [Numeric] Minimum value for the range slider (optional)
+  # @param max [Numeric] Maximum value for the range slider (optional)
+  # @param step [Numeric] Step value for the slider (optional)
+  # @param vertical [Boolean] Renders the slider vertically if true (default: false)
+  # @param sizing [Integer] Size index for slider height/thickness (default: config default)
+  # @param help_text [String] Helper or error text below the field
+  # @param class [String] Additional CSS classes for the input element
+  # @param ... any other HTML attribute supported by the <input type="range"> tag
+  def initialize(**props)
+    super(**props)
+    @vertical = options(@props.delete(:vertical), collection: [ true, false ], default: @@vertical)
+    @sizing = @props[:sizing].to_i || @@sizing
+    @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
+    @props[:type] = "range"
+    @props[:style] = @props[:style] || "" + ";transform: rotate(270deg);" if @vertical
+
+    add(class: styles[:sizes][@sizing], to: @props, first_element: true)
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def range
+    if @form.nil?
+      text_field_tag @name, @value, @props
+    else
+      @form.text_field(@attribute, **@props)
+    end
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [ label, range, help_text ]
+    end
+  end
+end

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::SelectComponent` is a styled dropdown/select field for forms.
+# It supports standard, grouped, and time zone options, integrates with Rails form builders,
+# and provides flexible props for prompt, disabled/selected options, helper text, and more.
+#
+# @example Basic usage
+#   = render Fluxbit::Form::SelectComponent.new(name: :role, options: ["Admin", "User", "Guest"], label: "User Role")
+#
+# @see docs/03_Forms/Select.md For detailed documentation and examples.
+class Fluxbit::Form::SelectComponent < Fluxbit::Form::TextFieldComponent
+  # Initializes the select component with the given properties.
+  #
+  # @param name [String] Name of the field (required unless using form builder)
+  # @param label [String] Label for the input (optional)
+  # @param value [String] Value for the field (optional)
+  # @param grouped [Boolean] Enables grouped select options (default: false)
+  # @param time_zone [Boolean] Uses Rails time zone select options (default: false)
+  # @param select_options [Hash] Options for select tag (prompt, selected, disabled, etc)
+  # @param choices [Array] List of choices for options (alternative to options)
+  # @param options [Array, Hash] List or hash of options (or groups if grouped)
+  # @param help_text [String] Helper or error text below the field
+  # @param class [String] Additional CSS classes for the select element
+  # @param ... any other HTML attribute supported by <select>
+  def initialize(**props)
+    super(**props)
+    @grouped = @props.delete(:grouped) || false
+    @time_zone = @props.delete(:time_zone) || false
+    @select_options = @props.delete(:select_options) || {}
+    @choices = @props.delete(:choices) || nil
+    @options = @props.delete(:options) || {}
+    @options = ::ActiveSupport::TimeZone.all if @time_zone
+  end
+
+  def input
+    if @form.present? && @attribute.present?
+      @form.select(
+        @attribute,
+        build_options_for_select,
+        @select_options,
+        @props
+      )
+    else
+      select_tag(
+        @name,
+        build_options_for_select,
+        @props
+      )
+    end
+  end
+
+  def build_options_for_select
+    if @grouped
+      grouped_options_for_select(
+        @options,
+        @selected,
+        disabled: @disabled_options,
+        prompt: @prompt,
+        divider: @divider
+      )
+    elsif @time_zone
+      time_zone_options_for_select(@selected)
+    else
+      options_for_select(@options, selected: @selected, disabled: @disabled_options)
+    end
+  end
+
+  private
+
+  def grouped_selected_option
+    @options.each do |group|
+      group_to_traverse = @divider ? group[1] : group
+      if group_to_traverse.is_a?(String)
+        return group_to_traverse if group_to_traverse == @selected.to_s
+
+        next
+      end
+
+      group_to_traverse.each do |item|
+        if item.is_a?(Array) && item[1] == @selected.to_s
+          return item[0]
+        elsif item.is_a?(String) && item == @selected.to_s
+          return item
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::Form::TextFieldComponent` is a form input component that extends `Fluxbit::Form::FieldComponent`.
+# It provides a styled text input (or textarea) with support for various HTML input types, optional icons or add-on content,
+# and color-coded validation states (e.g. default, success, error).
+#
+# @example Basic usage
+#   = render Fluxbit::Form::TextFieldComponent.new(name: :email)
+#
+# @see docs/03_Forms/TextField.md For detailed documentation and examples.
+class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
+  TYPE_DEFAULT = :text
+  TYPE_OPTIONS = %i[text textarea text_area color number email password search tel url date datetime_local month time week currency]
+  include Fluxbit::Config::Form::TextFieldComponent
+
+  # Initializes the text field 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 value [String] Value for the field (optional)
+  # @param type [Symbol] Input type (`:text`, `:email`, etc)
+  # @param icon [Symbol] Left icon (optional)
+  # @param right_icon [Symbol] Right icon (optional)
+  # @param addon [String] Add-on text or icon before the input (optional)
+  # @param addon_props [Hash] Props for the Add-on (optional)
+  # @param icon_props [Hash] Props for the left icon (optional)
+  # @param right_icon_props [Hash] Props for the right icon (optional)
+  # @param div_props [Hash] Props for the whole div (optional)
+  # @param multiline [Boolean] Renders a textarea if true
+  # @param color [Symbol] Field color (`:default`, `:success`, `:failure`, etc)
+  # @param sizing [Integer] Input size
+  # @param shadow [Boolean] Adds drop shadow if true
+  # @param disabled [Boolean] Disables the input if true
+  # @param readonly [Boolean] Makes the input readonly if true
+  # @param ... any other HTML attribute supported by input/textarea
+  def initialize(**props)
+    super(**props)
+    @color = valid_color(@props.delete(:color))
+    @type = options(@props.delete(:type), collection: TYPE_OPTIONS, default: TYPE_DEFAULT)
+    @icon = @props.delete(:icon)
+    @multiline = options(@props.delete(:multiline), default: false)
+    @shadow = @props.delete(:shadow)
+    @addon = @props.delete(:addon)
+    @right_icon = @props.delete(:right_icon)
+    @addon_props = @props.delete(:addon_props) || {}
+    @div_props = @props.delete(:div_props) || {}
+    @icon_props = @props.delete(:icon_props) || {}
+    @right_icon_props = @props.delete(:right_icon_props) || {}
+    @sizing = sizing_with_addon @props.delete(:sizing)
+    @props[:type] = @type
+
+    declare_classes
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    content_tag :div, **@wrapper_html do
+      safe_join [ label, icon_container, help_text ]
+    end
+  end
+
+  private
+
+  def valid_color(color)
+    return color if styles[:bg].key?(color)
+    return :failure if errors.present?
+
+    @@color
+  end
+
+  def sizing_with_addon(sizing)
+    sizing.to_i < styles[:sizes].count ? sizing.to_i : @@sizing
+  end
+
+  def declare_classes
+    add to: @props,
+        first_element: true,
+        class: [
+          styles[:default],
+          (@props.key?(:readonly) || @props.key?(:disabled) ? styles[:text][@color] : nil),
+          styles[:ring][@color],
+          styles[:bg][@color],
+          styles[:placeholder][@color],
+          styles[:border][@color],
+          @addon ? styles[:sizing_md_addon] : styles[:sizes][@sizing],
+          (@shadow ? styles[:shadow] : nil),
+          (@right_icon ? styles[:right_icon] : nil),
+          (@icon ? styles[:icon] : nil)
+        ].compact.join(" ")
+  end
+
+  def icon(icon_v, tag: :div, props: nil)
+    return "" if icon_v.blank?
+
+    content_tag(
+      tag,
+      anyicon(
+        icon: icon_v,
+        class: styles[:additional_icons][:class][@color]
+      ),
+      **props
+    )
+  end
+
+  def create_icon
+    add class: styles[:additional_icons][:icon], to: @icon_props
+    add(class: "pointer-events-none", to: @icon_props) unless events?(@icon_props)
+    icon(@icon, props: @icon_props)
+  end
+
+  def create_addon
+    add class: styles[:additional_icons][:addon][@color], to: @addon_props
+    icon(@addon, tag: :span, props: @addon_props)
+  end
+
+  def create_right_icon
+    add class: styles[:additional_icons][:right_icon], to: @right_icon_props
+    add(class: "pointer-events-none", to: @right_icon_props) unless events?(@right_icon_props)
+    icon(@right_icon, props: @right_icon_props)
+  end
+
+  def events?(props)
+    props.keys.intersection(
+      %i[onclick onsubmit onchange onkeydown onkeyup onkeypress href]
+    ).present?
+  end
+
+  def input
+    input_type = case @type
+    when :text
+      @multiline ? "text_area" : "text_field"
+    when :tel then "telephone_field"
+    when :currency then "text_field"
+    when :textarea, :text_area then "text_area"
+    else
+      "#{@type}_field"
+    end
+
+    if @form.present? && @attribute.present?
+      @form.public_send(input_type, @attribute, @props)
+    else
+      public_send("#{input_type}_tag", @name, @value, @props)
+    end
+  end
+
+  def icon_container_with_addon
+    add class: "flex", to: @div_props
+    content_tag :div, safe_join([ create_addon, create_right_icon, input ]), @div_props
+  end
+
+  def icon_container_without_addon
+    add class: "relative w-full", to: @div_props
+    content_tag :div, safe_join([ create_icon, create_right_icon, input ]), @div_props
+  end
+
+  def icon_container
+    return input if @icon.nil? && @right_icon.nil? && @addon.nil?
+    return icon_container_with_addon unless @addon.nil?
+
+    icon_container_without_addon
+  end
+end