fluxbit_view_components 0.1.0

data/app/components/fluxbit/card_component.rb

@@ -0,0 +1,135 @@
+class Fluxbit::CardComponent < Fluxbit::Component
+  # Define default styles for the card and its parts.
+  cattr_accessor :styles, default: {
+    base:         "",
+    base_image_left: "flex flex-row",
+    border:       "border border-gray-200 dark:border-gray-700",
+    shadow:       "shadow-sm",
+    rounded:      "rounded-lg",
+    hoverable:    "transition-shadow hover:shadow-lg",
+    clickable: {
+      default: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
+      primary: "cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-800",
+      success: "cursor-pointer hover:bg-green-100 dark:hover:bg-green-800",
+      danger:  "cursor-pointer hover:bg-red-100 dark:hover:bg-red-800"
+    },
+    # "flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow-sm md:flex-row md:max-w-xl dark:border-gray-700"
+    header:       "px-4 py-2 font-semibold text-gray-900 dark:text-gray-100",
+    body:         "px-4 py-2 space-y-4",
+    footer:       "px-4 py-2 text-sm text-gray-500 dark:text-gray-400",
+    image_top:    "w-full",
+    image_left:   "object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-s-lg",
+    content_left: "px-4 py-2",
+    colors: {
+      default: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
+      primary: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900 dark:text-white dark:border-blue-800",
+      success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-900 dark:text-white dark:border-green-800",
+      danger:  "bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-white dark:border-red-800"
+    }
+  }
+
+  renders_one :header
+  renders_one :footer
+  renders_one :section
+
+  # Initializes the card component with various customization options.
+  #
+  # @param color [Symbol] Color theme for the card (e.g., :default, :primary, :success).
+  # @param shadow [Boolean] Whether to apply a drop shadow.
+  # @param border [Boolean] Whether to display a border.
+  # @param rounded [Boolean] Whether the card has rounded corners.
+  # @param hoverable [Boolean] Whether to apply a hover effect.
+  # @param image [String, nil] URL or path of an image to display (optional).
+  # @param image_position [Symbol] Position of the image (:top or :left). Defaults to :top.
+  # @param href [String, nil] Whether the entire card is clickable.
+  # @param tooltip_text [String, nil] Text for a tooltip (optional).
+  # @param tooltip_placement [String] Placement of the tooltip (e.g., "top", "right").
+  # @param tooltip_trigger [String] Trigger event for the tooltip (e.g., "hover", "click").
+  # @param popover_text [String, nil] Text for a popover (optional).
+  # @param popover_placement [String] Placement of the popover.
+  # @param popover_trigger [String] Trigger event for the popover.
+  # @param props [Hash] Additional HTML attributes for the container.
+  def initialize(color: :default, shadow: true, border: true, rounded: true, hoverable: false,
+                 image: nil, image_position: :top, image_props: {},
+                 tooltip_text: nil, tooltip_placement: "top", tooltip_trigger: "hover",
+                 popover_text: nil, popover_placement: "top", popover_trigger: "click",
+                 **props)
+    @color             = color ? color.to_sym : :default
+    @shadow            = shadow
+    @border            = border
+    @rounded           = rounded
+    @hoverable         = hoverable
+    @image             = image
+    @image_position    = image_position.to_sym
+    @image_props       = image_props
+    @tooltip_text      = tooltip_text
+    @tooltip_placement = tooltip_placement
+    @tooltip_trigger   = tooltip_trigger
+    @popover_text      = popover_text
+    @popover_placement = popover_placement
+    @popover_trigger   = popover_trigger
+    @props             = props
+    @image_props[:src] = @image
+  end
+
+  def before_render
+    add to: @props, first_element: true, class: [
+      styles[:base],
+      @border ? styles[:border] : nil,
+      @shadow ? styles[:shadow] : nil,
+      @rounded ? styles[:rounded] : nil,
+      styles[:colors][@color] || nil,
+      @hoverable ? styles[:hoverable] : nil,
+      @props[:href] ? styles[:clickable][@color] : nil,
+      (@image && @image_position == :left) ? styles[:base_image_left] : nil
+    ]
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    container_tag = @props[:href] ? :a : :div
+
+    header_html = header ? content_tag(:div, header, class: self.class.styles[:header]) : nil
+    footer_html = footer ? content_tag(:div, footer, class: self.class.styles[:footer]) : nil
+    body_content = section ? section : nil
+
+    if @image && @image_position == :top
+      # Top image layout: image at the top, then header, body, and footer.
+      add(class: styles[:image_top], to: @image_props)
+      image_html = content_tag(:img, nil, **@image_props)
+      body_html  = body_content ? content_tag(:div, body_content, class: self.class.styles[:body]) : nil
+
+      content_tag(container_tag, **@props) do
+        concat(image_html)
+        concat(header_html) if header_html
+        concat(body_html) if body_html
+        concat(footer_html) if footer_html
+      end
+    elsif @image && @image_position == :left
+      # Left image layout: image on the left and content on the right in a flex container.
+      add(class: styles[:image_left], to: @image_props)
+      image_html = content_tag(:div, class: "x") do
+        content_tag(:img, nil, **@image_props)
+      end
+      content_inner = "".html_safe
+      content_inner << header_html.to_s if header_html
+      if body_content.present?
+        content_inner << content_tag(:div, body_content, class: self.class.styles[:body] + " " + self.class.styles[:content_left])
+      end
+      content_inner << footer_html.to_s if footer_html
+
+      content_tag(container_tag, **@props) do
+        concat(image_html)
+        concat(content_tag(:div, content_inner, class: "flex-1"))
+      end
+    else
+      # Fallback: render without image or with an unrecognized image_position.
+      body_html = body_content ? content_tag(:div, body_content, class: self.class.styles[:body]) : nil
+      content_tag(container_tag, **@props) do
+        concat(header_html) if header_html
+        concat(body_html) if body_html
+        concat(footer_html) if footer_html
+      end
+    end
+  end
+end

data/app/components/fluxbit/component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+require "anyicon"
+
+class Fluxbit::Component < ViewComponent::Base
+  # Custom class to hold button properties and content
+  ComponentObj = Data.define(:props, :content)
+
+  def initialize(**props)
+    @popover_placement = props.delete(:popover_placement) || :right
+    @popover_trigger = props.delete(:popover_trigger) || :hover # or :click
+    @popover_text = props.delete(:popover_text)
+
+    @tooltip_placement = props.delete(:tooltip_placement) || :right
+    @tooltip_trigger = props.delete(:tooltip_trigger) || :hover # or :click
+    @tooltip_text = props.delete(:tooltip_text)
+  end
+
+  def add(to:, first_element: false, **props)
+    unless props[:class].nil?
+      to[:class] = (to[:class] || "")
+        .split
+        .insert((first_element ? 0 : -1), props[:class])
+        .join(" ")
+    end
+    to
+  end
+
+  def remove_class(elements, from)
+    from.split.reject { |c| c.in?(elements.split) }.join(" ")
+  end
+
+  def options(value, collection: nil, default: nil)
+    if collection.nil?
+      value.nil? ? default : value
+    else
+      value.in?(collection) ? value : default
+    end
+  end
+
+  def render_popover_or_tooltip
+    safe_join [
+      (@popover_text.nil? ? "" : Fluxbit::PopoverComponent.new(id: target, **(@popover_props || {})).with_content(@popover_text).render_in(view_context)),
+      (@tooltip_text.nil? ? "" : Fluxbit::TooltipComponent.new(id: target, **(@tooltip_props || {})).with_content(@tooltip_text).render_in(view_context))
+    ]
+  end
+
+  def add_popover_or_tooltip
+    if popover? || @popover_text.present?
+      @props["data-popover-placement"] = @popover_placement
+      @props["data-popover-trigger"] = @popover_trigger unless @popover_trigger == :hover
+      @props["data-popover-target"] = target
+    end
+
+    if tooltip? || @tooltip_text.present?
+      @props["data-tooltip-placement"] = @tooltip_placement
+      @props["data-tooltip-trigger"] = @tooltip_trigger unless @tooltip_trigger == :hover
+      @props["data-tooltip-target"] = target
+    end
+  end
+
+  def target
+    @popover_target ||= "#{
+      @props.try('for') ||
+      @props.try(:for) ||
+      (0...10).map { ('a'..'z').to_a[rand(26)] }.join}_target"
+  end
+
+  def anyicon(icon:, **props)
+    Anyicon::Icon.render(icon: icon, **props)
+  end
+
+  def random_id
+    (0...30).map { ("a".."z").to_a[rand(26)] }.join
+  end
+
+  def fx_id
+    @fx_id ||= "#{element_name}-#{random_id}"
+  end
+
+  def element_name
+    self.class.to_s.match(/Fluxbit::(\w+)Component/)[1].underscore
+  rescue
+    "any"
+  end
+end

data/app/components/fluxbit/flex_component.rb

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::FlexComponent` is a component for rendering customizable flex containers.
+# It extends `Fluxbit::Component` and provides options for configuring the flex container's
+# appearance and behavior. You can control the flex direction, alignment, wrapping, gap,
+# and other attributes. This component is useful for creating responsive layouts and
+# aligning content dynamically.
+class Fluxbit::FlexComponent < Fluxbit::Component
+  include Fluxbit::Config::FlexComponent
+
+  # Initializes the flex component with various customization options.
+  #
+  # @param vertical [Boolean] Whether the flex direction is vertical. Defaults to `false`.
+  # @param reverse [Boolean] Whether the flex direction is reversed. Defaults to `false`.
+  # @param justify_content [Symbol] The justification of content. Options include `:start`, `:end`, `:center`, `:space_around`, `:space_between`, `:space_evenly`, etc. Defaults to `:center`.
+  # @param align_items [Symbol] The alignment of items. Options include `:start`, `:end`, `:center`, `:baseline`, `:stretch`. Defaults to `:center`.
+  # @param wrap [Boolean] Whether the flex container should wrap. Defaults to `false`.
+  # @param wrap_reverse [Boolean] Whether the flex container should wrap in reverse. Defaults to `false`.
+  # @param gap [Integer] The gap between flex items. Defaults to `0`.
+  # @param props [Hash] Additional HTML attributes for the container.
+  def initialize(**props)
+    @props = props
+
+    declare_classes(@props)
+    %i[vertical reverse justify_content align_items wrap wrap_reverse gap].each do |key|
+      @props.delete(key)
+    end
+
+    styles[:resolutions].each do |resolution|
+      if @props.key?(resolution)
+        declare_classes(@props.delete(resolution), resolution)
+      end
+    end
+  end
+
+  def call
+    content_tag :div, content, @props
+  end
+
+  private
+
+  def declare_resolution(resolution)
+    return "" if resolution.nil?
+    "#{resolution}:"
+  end
+
+  def declare_classes(props = {}, resolution = nil)
+    if props.key?(:vertical)
+      vertical = props[:vertical]
+      reverse = props[:reverse] || false
+      add class: "#{declare_resolution(resolution)}#{direction(vertical, reverse)}", to: @props, first_element: true
+    end
+
+    if props.key?(:wrap)
+      wrap = props[:wrap]
+      wrap_reverse = props[:wrap_reverse] || false
+      add class: "#{declare_resolution(resolution)}#{wrap(wrap, wrap_reverse)}", to: @props, first_element: true
+    end
+
+    if props.key?(:justify_content)
+      justify_content = props[:justify_content]
+      add class: "#{declare_resolution(resolution)}#{styles[:justify_content][justify_content.to_sym]}", to: @props, first_element: true
+    end
+
+    if props.key?(:align_items)
+      align_items = props[:align_items]
+      add class: "#{declare_resolution(resolution)}#{styles[:align_items][align_items.to_sym]}", to: @props, first_element: true
+    end
+
+    if props.key?(:gap)
+      gap = props[:gap]
+      add class: "#{declare_resolution(resolution)}#{styles[:gap][gap.to_i]}", to: @props, first_element: true
+    end
+
+    add(class: styles[:base], to: @props, first_element: true) if resolution.nil?
+  end
+
+  def wrap(wrap, reverse)
+    if wrap
+      reverse ? styles[:wrap][:wrap_reverse] : styles[:wrap][:wrap]
+    else
+      styles[:wrap][:nowrap]
+    end
+  end
+
+  def direction(vertical, reverse)
+    if vertical
+      reverse ? styles[:direction][:vertical_reverse] : styles[:direction][:vertical]
+    else
+      reverse ? styles[:direction][:horizontal_reverse] : styles[:direction][:horizontal]
+    end
+  end
+end

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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::CheckboxInputComponent < Fluxbit::Form::Component
+  # rubocop: disable Layout/LineLength
+  cattr_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
+
+  def initialize(form: nil, field: nil, label: nil, helper_text: nil, helper_popover: nil,
+                 helper_popover_placement: "right", **props)
+    super
+    @form = form
+    @field = field
+    @object = form&.object
+    @props = props
+    @label = label_value(label, @object, field, id)
+    @helper_text = define_helper_text(helper_text, @object, field)
+    @helper_popover = define_helper_popover(helper_popover, @object, field)
+    @helper_popover_placement = helper_popover_placement
+
+    @props[:type] = @props[:type].to_s.in?(%w[checkbox radio]) ? @props[:type].to_s : "checkbox"
+    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.nil?
+      content_tag :input, content, @props
+    else
+      @form.text_field(@field, **@props)
+    end
+  end
+
+  def call
+    if @helper_text
+      content_tag :div, { class: "flex" } do
+        concat content_tag(:div, input, { class: styles[:input_div] })
+        concat content_tag(:div, { class: styles[:helper_div] }) do
+          concat label
+          concat helper_text
+        end
+      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

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+# Interface to Inputs
+class Fluxbit::Form::Component < Fluxbit::Component
+  def id
+    return @id ||= random_id if @props[:id].nil? && @form.nil?
+    return @props[:id] unless @props[:id].nil?
+
+    "#{@form.object_name}_#{@field}"
+  end
+
+  def define_helper_text(helper_text, object, field)
+    return nil if helper_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 ],
+        default: nil
+      )
+    end
+
+    (helper_text.is_a?(Array) ? helper_text : [ helper_text ]) + errors
+  end
+
+  def define_helper_popover(helper_popover, object, field)
+    return helper_popover if helper_popover != false && !helper_popover.nil?
+
+    I18n.t(field, scope: [ :activerecord, :helper_popover, object.class.name.underscore.to_sym ], default: nil)
+  end
+
+  def label_value(label, object, field, id)
+    return object.class.human_attribute_name(field) if label.nil? && !object.nil? && !field.nil?
+    return id.to_s.humanize if label.nil? && !id.nil?
+    return label unless label.nil?
+
+    nil
+  end
+
+  def label
+    return "" if @label.blank?
+
+    Fluxbit::Form::LabelComponent.new(
+      for:                      id,
+      color:                    @color,
+      helper_popover:           @helper_popover,
+      helper_popover_placement: @helper_popover_placement,
+      class:                    @label_class
+    ).with_content(@label).render_in(view_context)
+  end
+
+  def errors
+    return [] unless @object&.errors&.any?
+
+    @object.errors.filter { |f| f.attribute == @field }.map(&:full_message)
+  end
+
+  def helper_text
+    return "" if @helper_text.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
+  end
+end

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

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::DatepickerComponent < Fluxbit::Form::Component
+  cattr_accessor :styles
+
+  def call; end
+end

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

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::FormBuilderComponent < Fluxbit::Component
+  TEXT_TYPES = %w[text email password number search time date datetime-local].freeze
+  INPUT_TYPES = %w[upload upload_image toggle textarea spacer select select_free range radio checkbox].freeze
+
+  cattr_accessor :styles
+  self.styles = %i[
+    grid-cols-1
+    grid-cols-2
+    grid-cols-3
+    grid-cols-4
+    gap-1
+    gap-2
+    gap-3
+    gap-4
+    col-span-1
+    col-span-2
+    col-span-3
+    col-span-4
+  ]
+
+  renders_many :elements,
+               lambda { |**props, &block|
+                 choose_element(props.merge({ form: @form }), block)
+               }
+
+  def initialize(form: nil, gap: 4, grid_cols: 2, show_errors: true, elements: [], **props)
+    super
+    @form = form
+    @object = form&.object
+    @elements = elements
+    @props = props
+    @gap = gap
+    @grid_cols = grid_cols
+    @show_errors = show_errors
+    add(class: grid_styles, to: @props) unless grid_styles && grid_styles.empty?
+  end
+
+  def grid_styles
+    return "grid gap-#{@gap} grid-cols-#{@grid_cols}" if @grid_cols.class != Hash
+
+    "grid gap-#{@gap} " + @grid_cols.map do |size, col|
+      "#{size == :default ? '' : "#{size}:"}grid-cols-#{col}"
+    end.join(" ")
+  end
+
+  def colspan(colspan_element)
+    return "" if colspan_element.nil?
+    return "col-span-#{colspan_element}" if colspan_element.class != Hash
+
+    colspan_element.map { |size, col| "#{size == :default ? '' : "#{size}:"}col-span-#{col}" }.join(" ")
+  end
+
+  def errors?
+    return "" if !@show_errors || @object.nil? || @object.errors&.none?
+
+    content_tag :div, class: "col-span-4" do
+      Fluxbit::AlertComponent.new(type: :danger).with_content(
+        I18n.t(
+          "form_error",
+          scope: [ :activerecord, :messages, @object.class.name.underscore.to_sym ],
+          count: @object.errors.count,
+          default: "#{pluralize(@object.errors.count, 'error')}."
+        )
+      ).render_in(view_context)
+    end
+  end
+
+  def choose_element(kwargs, block = nil)
+    colspan_element = kwargs.key?(:colspan) ? kwargs.delete(:colspan) : nil
+    outer_div = kwargs.key?(:outer_div) ? kwargs.delete(:outer_div) : ""
+    outer_div += colspan(colspan_element)
+    return content_tag(:div, block.call, class: outer_div) if kwargs[:type] == :html
+
+    kwargs[:show_errors] = false if kwargs[:type] == :group
+    component_klass = "Fluxbit::#{if (TEXT_TYPES + INPUT_TYPES + [ 'label', 'group', '' ]).include?(kwargs[:type].to_s)
+                                    'Form::'
+                                  else
+                                    ''
+                                  end}#{element_type(kwargs[:type])}Component".constantize
+    unless kwargs[:with_content]
+      return content_tag(:div, render(component_klass.new(**kwargs), &block), class: outer_div)
+    end
+
+    content = kwargs.delete(:with_content)
+    content_tag :div, render(component_klass.new(**kwargs).with_content(content), &block), class: outer_div
+  end
+
+  def element_type(type)
+    return "TextInput" 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
+    when :submit
+      "Button"
+    when :group
+      "FormBuilder"
+    else
+      type.to_s.camelcase
+    end
+  end
+
+  def generate_elements
+    return elements if elements?
+
+    safe_join(*@elements.map { |element| choose_element(element.merge({ form: @form }), nil) })
+  end
+
+  def generate_div
+    safe_join errors?, content_tag(:div, generate_elements, @props)
+  end
+
+  def call
+    generate_div
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::HelperTextComponent` 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
+
+  # Initializes the helper text component with the given properties.
+  #
+  # @param [Symbol] color (:default) The color of the helper text.
+  # @param [Hash] props The properties to customize the helper text.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the helper text element.
+  def initialize(color: nil, **props)
+    super
+    @props = props
+    color = @@color unless color.in? %i[info default success failure warning]
+    add class: style(color), to: @props, first_element: true
+  end
+
+  def style(color)
+    styles[:base] + styles[:colors][color]
+  end
+
+  def call
+    content_tag :p, content, @props
+  end
+end

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+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
+
+  def initialize(color: :default, form: nil, with_content: nil, helper_text: nil,
+                 sizing: :sm, helper_popover: nil, helper_popover_placement: "right", **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
+    add class: styles[:base], to: @props, first_element: true
+    add class: styles[:sizes][@sizing], to: @props, first_element: true
+  end
+
+  def span_helper_popover
+    return "" if @helper_popover.nil?
+
+    content_tag :span,
+                anyicon(icon: "heroicons_solid:question-mark-circle", class: "w-4 h-4"),
+                {
+                  "data-popover-placement": @helper_popover_placement,
+                  "data-popover-target": target,
+                  class: styles[:helper_popover]
+                }
+  end
+
+  def render_popover
+    return "" if @helper_popover.nil?
+
+    Fluxbit::PopoverComponent.new(id: target).with_content(@helper_popover).render_in(view_context)
+  end
+
+  def call
+    safe_join(
+      [
+        content_tag(:label, safe_join([ content || @with_content, span_helper_popover ]), @props),
+        helper_text,
+        render_popover
+      ]
+    )
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::RadioInputComponent < Fluxbit::Form::Component
+  def initialize(**kwargs, &block)
+    super
+    kwargs[:type] = :radio
+
+    @component_klass = "Fluxbit::Form::CheckboxInputComponent".constantize
+    @kwargs = kwargs
+    @block = block
+  end
+
+  def call
+    if @kwargs[:with_content]
+      content = @kwargs.delete(:with_content)
+      render(@component_klass.new(**@kwargs).with_content(content), &@block)
+    else
+      render(@component_klass.new(**@kwargs), &@block)
+    end
+  end
+end