fluxbit_view_components 0.2.0 → 0.4.0

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

@@ -0,0 +1,126 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::Form::RadioGroupButtonComponent` is a component for rendering radio buttons
+# styled as a button group. It provides the visual appearance of grouped buttons while
+# maintaining radio button behavior (only one option can be selected at a time).
+#
+# This component is useful for creating segmented controls, view toggles, or any interface
+# where users need to select one option from a group with a button-like appearance.
+class Fluxbit::Form::RadioGroupButtonComponent < Fluxbit::Form::FieldComponent
+  include Fluxbit::Config::Form::RadioGroupButtonComponent
+
+  renders_many :radio_options, lambda { |**props, &block|
+    @options_group << ComponentObj.new(props, view_context.capture(&block))
+  }
+
+  ##
+  # Initializes the radio group button component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the radio group button.
+  # @option props [String] :name (nil) The name attribute for the radio button group (required for proper radio functionality).
+  # @option props [Symbol, String] :color (:default) The color style of the buttons.
+  # @option props [Symbol, String] :size (1) The size of the buttons (e.g., `0` to `4`).
+  # @option props [Boolean] :pill (false) Determines if the buttons have pill-shaped edges.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the group container.
+  #
+  # @return [Fluxbit::Form::RadioGroupButtonComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @name = @props.delete(:name) || "radio_group_#{fx_id}"
+    @color = options (@props.delete(:color) || "").to_sym, collection: button_styles[:colors].keys, default: @@color
+    @size = @props.delete(:size) || @@size
+    @pill = options @props.delete(:pill), default: false
+    @outline = @color.to_s.end_with?("_outline")
+    @options_group = []
+
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:group], to: @props, first_element: true
+  end
+
+  def call
+    radio_options
+    tag.div(**@props) do
+      @options_group.each_with_index do |option, index|
+        concat render_radio_button(option, index)
+      end
+    end
+  end
+
+  private
+
+  def render_radio_button(option, index)
+    option_props = option.props || {}
+    option_content = option.content
+    option_value = option_props.delete(:value) || index
+    option_checked = option_props.delete(:checked) || false
+    option_disabled = option_props.delete(:disabled) || false
+
+    radio_id = "#{@name}_#{option_value}_#{fx_id}"
+
+    # Input element
+    input_html = {
+      type: "radio",
+      id: radio_id,
+      name: @name,
+      value: option_value,
+      class: "#{Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:input]} peer"
+    }
+    input_html[:checked] = true if option_checked
+    input_html[:disabled] = true if option_disabled
+
+    # Label element (styled as button)
+    label_html = option_props.dup
+    label_html[:for] = radio_id
+
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:base], to: label_html, first_element: true
+    add class: button_color_classes, to: label_html, first_element: true
+    add class: button_size_classes, to: label_html, first_element: true
+    add class: button_pill_classes, to: label_html, first_element: true
+    add class: button_outline_classes, to: label_html, first_element: true
+
+    # Position classes
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:start], to: label_html if index == 0
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:end], to: label_html if index == @options_group.size - 1
+    add class: Fluxbit::Config::Form::RadioGroupButtonComponent.styles[:label][:position][:middle], to: label_html if index > 0 && index < @options_group.size - 1
+
+    # Selected state - use peer-checked for CSS-only interaction
+    # The peer modifier allows the label to change when the radio input is checked
+    add class: "peer-checked:brightness-90 dark:peer-checked:brightness-75", to: label_html
+
+    # Disabled state
+    if option_disabled
+      add class: Fluxbit::Config::ButtonComponent.styles[:disabled], to: label_html, first_element: true
+    end
+
+    tag.div(class: "relative") do
+      concat tag.input(**input_html)
+      concat tag.label(option_content, **label_html)
+    end
+  end
+
+  def button_styles
+    Fluxbit::Config::ButtonComponent.styles
+  end
+
+  def button_color_classes
+    @color.in?(button_styles[:colors].keys) ? button_styles[:colors][@color] : button_styles[:colors][:default]
+  end
+
+  def button_size_classes
+    button_styles[:size][@size.to_i]
+  end
+
+  def button_pill_classes
+    return "" if @outline
+    button_styles[:pill][@pill ? :on : :off]
+  end
+
+  def button_outline_classes
+    if @outline
+      "#{button_styles[:outline][:on]} #{button_styles[:outline][:pill][@pill ? :on : :off]}"
+    else
+      button_styles[:outline][:off]
+    end
+  end
+end

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,185 @@
+# 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, false] Label text for the select field (optional, auto-generated from attribute if using form builder)
+  # @param help_text [String, Array, false] Help text displayed below the field (optional, supports i18n)
+  # @param helper_popover [String, false] Content for an info popover next to the label (optional, supports i18n)
+  # @param helper_popover_placement [String] Placement of the popover: "top", "right", "bottom", "left" (default: "right")
+  # @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, String] List or hash of options, or pre-formatted HTML from options_for_select
+  # @param prompt [String, Boolean, false] Prompt text, true to use default, or false to disable (optional, defaults to I18n if object/attribute present)
+  # @param include_blank [String, Boolean] Include blank option (optional)
+  # @param selected [Object] Pre-selected value (optional)
+  # @param disabled [Array, Object] Disabled options (optional)
+  # @param color [Symbol] Color state: :default, :success, :danger, :warning, :info (optional)
+  # @param sizing [Integer] Field size (0 to 2, default: 1)
+  # @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) || {}
+
+    # Extract select-specific options
+    prompt_value = @select_options.delete(:prompt) || @props.delete(:prompt)
+    @include_blank = @select_options.delete(:include_blank) || @props.delete(:include_blank)
+    @selected = @select_options.delete(:selected) || @props.delete(:selected)
+    @disabled_options = @select_options.delete(:disabled) || @props.delete(:disabled)
+
+    @options = ::ActiveSupport::TimeZone.all if @time_zone
+
+    # Define prompt with I18n support
+    define_prompt(prompt_value)
+  end
+
+  def input
+    if @form.present? && @attribute.present?
+      # form.select(attribute, choices, options = {}, html_options = {})
+      # For form builder with time zones, use the specialized helper
+      if @time_zone
+        @form.time_zone_select(@attribute, nil, build_select_options_hash, @props)
+      else
+        # form.select can accept raw choices OR pre-formatted option tags
+        # We use pre-formatted tags for consistency with grouped selects
+        @form.select(
+          @attribute,
+          build_options_for_select,
+          build_select_options_hash,
+          @props
+        )
+      end
+    else
+      # select_tag(name, option_tags = nil, options = {})
+      # option_tags should be pre-formatted HTML
+      select_tag(
+        @name,
+        build_options_for_select,
+        @props
+      )
+    end
+  end
+
+  # Build options hash for form.select (prompt, include_blank, etc.)
+  # Note: Don't include selected/disabled if options are pre-formatted HTML
+  def build_select_options_hash
+    options_hash = @select_options.dup
+    options_hash[:prompt] = @prompt if @prompt
+    options_hash[:include_blank] = @include_blank if @include_blank
+
+    # Only add selected/disabled if we're building options from raw data
+    unless options_are_preformatted?
+      options_hash[:selected] = @selected if @selected
+      options_hash[:disabled] = @disabled_options if @disabled_options
+    end
+
+    options_hash
+  end
+
+  # Build pre-formatted option tags for select_tag and form.select
+  def build_options_for_select
+    # If options are already HTML (from options_for_select/grouped_options_for_select), use as-is
+    if options_are_preformatted?
+      html = @options.dup
+      # Add prompt if needed and not already in the HTML (only for select_tag)
+      html = add_prompt_to_html(html) if @prompt && !html.include?(@prompt.to_s) && !using_form_builder?
+      return html
+    end
+
+    # Otherwise, build the HTML from raw data
+    html = if @grouped
+      grouped_options_for_select(
+        @options,
+        @selected,
+        disabled: @disabled_options,
+        divider: @divider
+      )
+    elsif @time_zone
+      time_zone_options_for_select(@selected)
+    else
+      options_for_select(@options, selected: @selected, disabled: @disabled_options)
+    end
+
+    # Add prompt option at the beginning if specified
+    # Only add it manually for select_tag (form.select handles it via options hash)
+    html = add_prompt_to_html(html) if @prompt && !using_form_builder?
+    html
+  end
+
+  private
+
+  # Check if we're using a form builder
+  def using_form_builder?
+    @form.present? && @attribute.present?
+  end
+
+  def define_prompt(prompt)
+    # If prompt is explicitly false, don't set it
+    return if prompt.is_a?(FalseClass)
+
+    # If prompt is explicitly provided (string or true), use it
+    if prompt.present?
+      @prompt = prompt
+      return
+    end
+
+    # If no prompt provided and we have an object and attribute, try I18n lookup
+    if prompt.nil? && @object.present? && @attribute.present?
+      i18n_prompt = I18n.t(
+        @attribute,
+        scope: [ @object.class.name.pluralize.underscore.to_sym, :prompts ],
+        default: nil
+      )
+      @prompt = i18n_prompt if i18n_prompt.present?
+    end
+  end
+
+  # Check if options are already pre-formatted HTML
+  # Pre-formatted options are strings containing HTML tags
+  def options_are_preformatted?
+    @options.is_a?(String) && @options.include?("<option")
+  end
+
+  # Add prompt option to the beginning of the HTML options
+  def add_prompt_to_html(html)
+    prompt_text = @prompt.is_a?(String) ? @prompt : "Please select"
+    prompt_option = "<option value=\"\">#{ERB::Util.html_escape(prompt_text)}</option>".html_safe
+    prompt_option + html
+  end
+
+  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,185 @@
+# 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 placeholder [String] Placeholder text for the input field (optional, defaults to I18n if object/attribute present, pass false to disable)
+  # @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_html [Hash] Props for the Add-on (optional)
+  # @param icon_html [Hash] Props for the left icon (optional)
+  # @param right_icon_html [Hash] Props for the right icon (optional)
+  # @param div_html [Hash] Props for the whole div (optional)
+  # @param multiline [Boolean] Renders a textarea if true
+  # @param color [Symbol] Field color (`:default`, `:success`, `:danger`, 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_html = @props.delete(:addon_html) || {}
+    @div_html = @props.delete(:div_html) || {}
+    @icon_html = @props.delete(:icon_html) || {}
+    @right_icon_html = @props.delete(:right_icon_html) || {}
+    @sizing = sizing_with_addon @props.delete(:sizing)
+    @props[:type] = @type
+
+    define_placeholder(@props.delete(:placeholder))
+    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 define_placeholder(placeholder)
+    return if placeholder.is_a?(FalseClass)
+
+    if placeholder.nil? && @object.present? && @attribute.present?
+      placeholder = I18n.t(
+        @attribute,
+        scope: [ @object.class.name.pluralize.underscore.to_sym, :placeholders ],
+        default: nil
+      )
+    end
+
+    @props[:placeholder] = placeholder if placeholder.present?
+  end
+
+  def valid_color(color)
+    return color if styles[:bg].key?(color)
+    return :danger 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_v,
+        class: styles[:additional_icons][:class][@color]
+      ),
+      **props
+    )
+  end
+
+  def create_icon
+    add class: styles[:additional_icons][:icon], to: @icon_html
+    add(class: "pointer-events-none", to: @icon_html) unless events?(@icon_html)
+    icon(@icon, props: @icon_html)
+  end
+
+  def create_addon
+    add class: styles[:additional_icons][:addon][@color], to: @addon_html
+    icon(@addon, tag: :span, props: @addon_html)
+  end
+
+  def create_right_icon
+    add class: styles[:additional_icons][:right_icon], to: @right_icon_html
+    add(class: "pointer-events-none", to: @right_icon_html) unless events?(@right_icon_html)
+    icon(@right_icon, props: @right_icon_html)
+  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?
+      @props[:value] = @value if @value.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_html
+    content_tag :div, safe_join([ create_addon, create_right_icon, input ]), @div_html
+  end
+
+  def icon_container_without_addon
+    add class: "relative w-full", to: @div_html
+    content_tag :div, safe_join([ create_icon, create_right_icon, input ]), @div_html
+  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

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, :danger, :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 :danger 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