fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/card_component.rb

@@ -30,7 +30,13 @@ class Fluxbit::CardComponent < Fluxbit::Component
 
   renders_one :header
   renders_one :footer
-  renders_one :section
+  renders_many :sections, lambda { |*args, **props, &block|
+    no_class = props.delete(:no_class) || false
+    add(class: styles[:body], to: props) unless no_class
+    # remove_class_from_props props
+
+    tag.div(block.call, **props)
+  }
 
   # Initializes the card component with various customization options.
   #
@@ -50,7 +56,7 @@ class Fluxbit::CardComponent < Fluxbit::Component
   # @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: {},
+                 image: nil, image_position: :top, image_html: {},
                  tooltip_text: nil, tooltip_placement: "top", tooltip_trigger: "hover",
                  popover_text: nil, popover_placement: "top", popover_trigger: "click",
                  **props)
@@ -61,7 +67,7 @@ class Fluxbit::CardComponent < Fluxbit::Component
     @hoverable         = hoverable
     @image             = image
     @image_position    = image_position.to_sym
-    @image_props       = image_props
+    @image_html       = image_html
     @tooltip_text      = tooltip_text
     @tooltip_placement = tooltip_placement
     @tooltip_trigger   = tooltip_trigger
@@ -69,7 +75,7 @@ class Fluxbit::CardComponent < Fluxbit::Component
     @popover_placement = popover_placement
     @popover_trigger   = popover_trigger
     @props             = props
-    @image_props[:src] = @image
+    @image_html[:src] = @image
   end
 
   def before_render
@@ -89,45 +95,42 @@ class Fluxbit::CardComponent < Fluxbit::Component
   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
+    header_html = header? ? tag.div(header, class: self.class.styles[:header]) : nil
+    footer_html = footer? ? tag.div(footer, class: self.class.styles[:footer]) : nil
+    body_content = content || safe_join(sections)
 
     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
+      add(class: styles[:image_top], to: @image_html)
+      image_html = tag.img(**@image_html)
 
       content_tag(container_tag, **@props) do
         concat(image_html)
         concat(header_html) if header_html
-        concat(body_html) if body_html
+        concat(body_content) if body_content
+        concat(content) if content?
         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])
+      add(class: styles[:image_left], to: @image_html)
+      image_html = tag.div(class: "x") do
+        tag.img(**@image_html)
       end
-      content_inner << footer_html.to_s if footer_html
+      content_parts = []
+      content_parts << header_html if header_html
+      content_parts << body_content if body_content.present?
+      content_parts << footer_html if footer_html
 
       content_tag(container_tag, **@props) do
         concat(image_html)
-        concat(content_tag(:div, content_inner, class: "flex-1"))
+        concat(tag.div(safe_join(content_parts), 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(body_content) if body_content
         concat(footer_html) if footer_html
       end
     end

data/app/components/fluxbit/carousel_component.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::CarouselComponent` is a customizable carousel component that extends `Fluxbit::Component`.
+# It allows you to create image carousels or content sliders with various features like automatic sliding,
+# indicators, navigation controls, and customizable animations.
+#
+# @example Basic usage
+#   = fx_carousel do |c|
+#     c.with_slide { image_tag("slide1.jpg") }
+#     c.with_slide { image_tag("slide2.jpg") }
+#     c.with_slide { image_tag("slide3.jpg") }
+#   end
+#
+# @see docs/02_Components/Carousel.md For detailed documentation.
+class Fluxbit::CarouselComponent < Fluxbit::Component
+  include Fluxbit::Config::CarouselComponent
+
+  renders_many :slides, lambda { |**props, &block|
+    begin
+      @slides_group << ComponentObj.new(props, view_context.capture(&block))
+    rescue
+      @slides_group << ComponentObj.new(props, nil)
+    end
+  }
+
+  ##
+  # Initializes the carousel component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the component.
+  # @option props [Boolean] :slide (true) Enables automatic sliding between items.
+  # @option props [Integer] :slide_interval (3000) Interval in milliseconds between automatic slides.
+  # @option props [Boolean] :indicators (true) Shows slide indicator dots at the bottom.
+  # @option props [Boolean] :controls (true) Shows previous/next navigation controls.
+  # @option props [String] :left_control (nil) Custom content/text for left control button.
+  # @option props [String] :right_control (nil) Custom content/text for right control button.
+  # @option props [String] :remove_class ('') CSS classes to remove from the default class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::CarouselComponent]
+  def initialize(**props)
+    super
+    @props = props
+    @slides_group = []
+
+    @slide = options(@props.delete(:slide), default: @@slide)
+    @slide_interval = options(@props.delete(:slide_interval), default: @@slide_interval)
+    @indicators = options(@props.delete(:indicators), default: @@indicators)
+    @controls = options(@props.delete(:controls), default: @@controls)
+    @left_control = @props.delete(:left_control)
+    @right_control = @props.delete(:right_control)
+
+    declare_classes
+
+    # Handle class removal
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+
+    # Flowbite carousel data attributes
+    @props[:data] ||= {}
+    @props[:data][:carousel] = @slide ? "slide" : "static"
+  end
+
+  def call
+    slides # Ensure slides are rendered
+
+    tag.div(**@props) do
+      concat(render_slides_container)
+      concat(render_indicators) if @indicators
+      concat(render_controls) if @controls
+    end
+  end
+
+  private
+
+  def declare_classes
+    add(class: styles[:base], to: @props, first_element: true)
+  end
+
+  def render_slides_container
+    tag.div(class: styles[:slides_container]) do
+      safe_join(@slides_group.map.with_index { |slide, index| render_slide(slide, index) })
+    end
+  end
+
+  def render_slide(slide, index)
+    slide_props = slide.props.dup
+    add(class: styles[:slide][:base], to: slide_props, first_element: true)
+    add(class: styles[:slide][:inactive], to: slide_props) unless index.zero?
+
+    slide_props[:data] ||= {}
+    slide_props[:data][:carousel_item] = index.zero? ? "active" : true
+
+    tag.div(**slide_props) do
+      slide.content
+    end
+  end
+
+  def render_indicators
+    tag.div(class: styles[:indicators][:container]) do
+      safe_join(@slides_group.count.times.map { |index| render_indicator(index) })
+    end
+  end
+
+  def render_indicator(index)
+    button_props = {
+      type: "button",
+      class: styles[:indicators][:button],
+      "aria-current": index.zero?.to_s,
+      "aria-label": "Slide #{index + 1}",
+      data: {
+        carousel_slide_to: index
+      }
+    }
+
+    tag.button(**button_props)
+  end
+
+  def render_controls
+    safe_join([
+      render_control_button(:previous),
+      render_control_button(:next)
+    ])
+  end
+
+  def render_control_button(direction)
+    is_previous = direction == :previous
+    custom_content = is_previous ? @left_control : @right_control
+
+    button_props = {
+      type: "button",
+      class: [styles[:controls][:button], is_previous ? styles[:controls][:previous] : styles[:controls][:next]].join(" "),
+      data: {}
+    }
+
+    # Add Flowbite carousel control data attribute
+    if is_previous
+      button_props[:data][:carousel_prev] = ""
+    else
+      button_props[:data][:carousel_next] = ""
+    end
+
+    tag.button(**button_props) do
+      if custom_content
+        custom_content
+      else
+        concat(tag.span(class: styles[:controls][:icon_wrapper]) do
+          is_previous ? chevron_left(class: styles[:controls][:icon]) : chevron_right(class: styles[:controls][:icon])
+        end)
+        concat(tag.span("#{direction.to_s.capitalize} slide", class: styles[:controls][:sr_only]))
+      end
+    end
+  end
+
+end

data/app/components/fluxbit/component.rb

@@ -3,6 +3,8 @@
 require "anyicon"
 
 class Fluxbit::Component < ViewComponent::Base
+  include Fluxbit::IconHelpers
+
   # Custom class to hold button properties and content
   ComponentObj = Data.define(:props, :content)
 
@@ -27,7 +29,14 @@ class Fluxbit::Component < ViewComponent::Base
   end
 
   def remove_class(elements, from)
-    from.split.reject { |c| c.in?(elements.split) }.join(" ")
+    return "" if from.blank?
+    return from if elements.blank?
+
+    from.split.reject { |c| c.in?((elements || "").split) }.join(" ")
+  end
+
+  def remove_class_from_props(props)
+    props[:class] = remove_class(props.delete(:remove_class) || "", props[:class])
   end
 
   def options(value, collection: nil, default: nil)
@@ -45,6 +54,14 @@ class Fluxbit::Component < ViewComponent::Base
     ]
   end
 
+  def popover?
+    false # Override in components that support popovers via renders_one :popover
+  end
+
+  def tooltip?
+    false # Override in components that support tooltips via renders_one :tooltip
+  end
+
   def add_popover_or_tooltip
     if popover? || @popover_text.present?
       @props["data-popover-placement"] = @popover_placement
@@ -66,8 +83,12 @@ class Fluxbit::Component < ViewComponent::Base
       (0...10).map { ('a'..'z').to_a[rand(26)] }.join}_target"
   end
 
-  def anyicon(icon:, **props)
-    Anyicon::Icon.render(icon: icon, **props)
+  def anyicon(icon, **props)
+    Anyicon::Icon.render(icon, **props)
+  end
+
+  def icon(icon_name, **props)
+    anyicon(icon_name, **props)
   end
 
   def random_id

data/app/components/fluxbit/drawer_component.html.erb

@@ -0,0 +1,30 @@
+<%= tag.div(**@props) do %>
+  <% if @swipeable %>
+  <div class="p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700" data-drawer-toggle="<%= @props[:id] %>">
+    <span class="absolute w-8 h-1 -translate-x-1/2 bg-gray-300 rounded-lg top-3 left-1/2 dark:bg-gray-600"></span>
+  <% end %>
+  <% if header? %>
+    <h5 id="<%= @props[:id] %>-label" class="inline-flex items-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400">
+      <%= header %>
+    </h5>
+  <% end %>
+  <% if @swipeable %></div><% end %>
+
+  <% if @show_close_button %>
+    <button type="button"
+      <% if @using_stimulus %>
+      data-action="click->fx-drawer#hide"
+      <% else %>
+      data-drawer-hide="<%= @props[:id] %>"
+      <% end %>
+      aria-controls="<%= @props[:id] %>"
+      class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm size-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white"
+    >
+      <%= close_icon(class: "w-3 h-3") %>
+      <span class="sr-only"><%= t("fluxbit.drawer.dismiss") %></span>
+    </button>
+  <% end %>
+  <div>
+  <%= content %>
+  </div>
+<% end %>

data/app/components/fluxbit/drawer_component.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::DrawerComponent` is a customizable alert component that extends `Fluxbit::Component`.
+# It provides various options to display alert messages with different styles, icons, and behaviors
+# such as close functionality and animations.
+#
+# Example usage:
+#   = render Fluxbit::DrawerComponent.new(
+#     placement: :left,
+#     sizing: :md,
+#     show_close_button: true,
+#     swipeable: false,
+#     shadow: true
+#   ) do |drawer|
+#     drawer.with_header do |header|
+#       "Header Content"
+#     end
+#   end
+#
+class Fluxbit::DrawerComponent < Fluxbit::Component
+  include Fluxbit::Config::DrawerComponent
+
+  renders_one :header, lambda { |*args, **props, &block|
+    # add(class: props[:class], to: @caption_html) if props[:class]
+    # @caption_html = props.merge(@caption_html)
+    # remove_class_from_props @caption_html
+
+    block.call
+  }
+
+  ##
+  # Initializes the table component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the table.
+  # @option props [Boolean] :striped (false) Determines if the table rows should be striped.
+  # @option props [Boolean] :bordered (false) Determines if the table should have borders.
+  # @option props [Boolean] :hover (false) Determines if the table rows should highlight on hover.
+  # @option props [Boolean] :shadow (false) Determines if the table should have a shadow effect.
+  # @option props [Hash] :wrapper_html Additional HTML attributes for the wrapper div.
+  # @option props [Hash] :thead_html Additional HTML attributes for the table header.
+  # @option props [Hash] :tbody_html Additional HTML attributes for the table body.
+  # @option props [Hash] :tr_html Additional HTML attributes for the table rows.
+  # @option props [Hash] :cells_html Additional HTML attributes for the table cells.
+  #
+  # @example
+  #   = render Fluxbit::DrawerComponent.new(
+  #     placement: :left,
+  #     sizing: :md,
+  #     show_close_button: true,
+  #     swipeable: false,
+  #     shadow: true
+  #   ) do |drawer|
+  #     drawer.with_header do |header|
+  #       "Header Content"
+  #     end
+  #   end
+  #
+  # @return [Fluxbit::DrawerComponent]
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @placement = options(@props.delete(:placement), collection: styles[:placements].keys, default: @@placement).to_sym
+    @sizing = options(@props.delete(:sizing), collection: styles[:sizes][:horizontal].keys, default: @@sizing).to_sym
+    @show_close_button = options @props.delete(:show_close_button), default: @@show_close_button
+    @swipeable = options @props.delete(:swipeable), default: @@swipeable
+    @shadow = options @props.delete(:shadow), default: @@shadow
+    @backdrop = options @props.delete(:backdrop), default: @@backdrop
+    @auto_show = options @props.delete(:auto_show), default: @@auto_show
+    @body_scrolling = options @props.delete(:body_scrolling), default: @@body_scrolling
+    @edge_offset = @props.delete(:edge_offset)
+    @backdrop_classes = @props.delete(:backdrop_classes)
+
+    if @swipeable
+      @placement = :bottom
+      @show_close_button = false
+    end
+
+    @props[:id] ||= fx_id
+    @props[:tabindex] = "-1"
+    @props["aria-labelledby"] = "#{@props[:id]}-label"
+
+    @using_stimulus = @props["data-fx-drawer-target"].present? || @props["data-controller"].to_s.include?("fx-drawer") ||
+                      (
+                        @props[:data].present? && (
+                          @props[:data][:"fx-drawer-target"].present? || (@props[:data][:controller] || "").to_s.include?("fx-drawer")
+                        )
+                      )
+
+    if @using_stimulus
+      if @props["data-controller"].to_s.include?("fx-drawer") || @props[:data][:controller].to_s.include?("fx-drawer")
+        @props["data-fx-drawer-auto-show-value"] = @auto_show
+        @props["data-fx-drawer-placement-value"] = @placement.to_s
+        @props["data-fx-drawer-backdrop-value"] = @backdrop
+        @props["data-fx-drawer-body-scrolling-value"] = @body_scrolling
+        @props["data-fx-drawer-edge-value"] = @swipeable
+        @props["data-fx-drawer-edge-offset-value"] = @edge_offset if @edge_offset.present? && @swipeable
+        @props["data-fx-drawer-backdrop-classes-value"] = @backdrop_classes if @backdrop_classes.present?
+      else
+        @props["data-auto-show"] = @auto_show
+        @props["data-placement"] = @placement.to_s
+        @props["data-backdrop"] = @backdrop
+        @props["data-body-scrolling"] = @body_scrolling
+        @props["data-edge"] = @swipeable
+        @props["data-edge-offset"] = @edge_offset if @edge_offset.present? && @swipeable
+        @props["data-backdrop-classes"] = @backdrop_classes if @backdrop_classes.present?
+      end
+    end
+
+    add(
+      class: [ styles[:root],
+              styles[:placements][@placement],
+              styles[:color],
+              @swipeable ? styles[:swipeable][:default] : nil,
+              @shadow ? styles[:shadow] : nil,
+              size_class ],
+      to: @props
+    )
+  end
+
+  def size_class
+    styles[:sizes][@placement.in?([ :left, :right ]) ? :horizontal : :vertical][@sizing]
+  end
+end

data/app/components/fluxbit/dropdown_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::DropdownComponent` is a component for rendering customizable Dropdown containers.
+class Fluxbit::DropdownComponent < Fluxbit::Component
+  include Fluxbit::Config::DropdownComponent
+
+  renders_many :items, Fluxbit::DropdownItemComponent
+
+  # Initializes the Dropdown component with various customization options.
+  #
+  # @param sizing [Integer] The alignment of items. Defaults to `0` (small).
+  # @param divider [Boolean] Whether the Dropdown has a division between the items. Defaults to `true`.
+  # @param props [Hash] Additional HTML attributes for the container.
+  def initialize(**props)
+    @props = props
+    @sizing = props.delete(:sizing) || @@sizing
+    @auto_divider = options props.delete(:auto_divider), default: @@auto_divider
+    @props[:id] ||= "dropdown-#{random_id}"
+
+    add to: @props, class: [
+      styles[:base],
+      styles[:sizes][@sizing],
+      @auto_divider ? styles[:auto_divider] : nil
+    ]
+
+    remove_class_from_props(@props)
+  end
+
+  def get_item
+    @props[:id]
+  end
+
+  def call
+    tag.div(**@props) do
+      tag.ul(class: styles[:ul]) do
+        concat(safe_join(items)) if items.any?
+        concat(Fluxbit::DropdownItemComponent.new(content).render_in(view_context)) if content.present?
+      end
+    end
+  end
+end

data/app/components/fluxbit/dropdown_item_component.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::DropdownItemComponent` is a component for rendering customizable Dropdown item containers.
+class Fluxbit::DropdownItemComponent < Fluxbit::Component
+  include Fluxbit::Config::DropdownComponent
+
+  renders_many :items, Fluxbit::DropdownItemComponent
+
+  def initialize(param_content = "", **props)
+    @param_content = param_content
+    @item_props = props
+    @type = @item_props.delete(:as) || :div
+    @height = @item_props.delete(:height) || @@height
+    @icon = @item_props.delete(:icon)
+    add to: @item_props, class: styles[:items][:heights][@height]
+    remove_class_from_props(@item_props)
+
+    @content_html = @item_props.delete(:content_html) || {}
+
+    @icon_html = @item_props.delete(:icon_html) || {}
+    add to: @icon_html, class: styles[:icon] if @icon.present?
+
+    @divider = @item_props.delete(:divider) || false
+  end
+
+  def call
+    return tag.li(class: styles[:divider]) if @divider
+
+    if items.any?
+      @content_html["data-dropdown-toggle"] = @item_props.delete(:dropdown_id) || "inner-dropdown-#{random_id}"
+      @content_html["data-dropdown-placement"] = @item_props.delete(:dropdown_placement) || "right-start"
+      height = @item_props.delete(:sizing) || 0
+      auto_divider = @item_props.delete(:auto_divider) || true
+      @type = :button
+      @content_html[:type] = "button"
+    end
+
+    add to: @content_html, class: styles[:items][:types][@type]
+    remove_class_from_props(@content_html)
+
+    tag.li(**@item_props) do
+      concat(content_tag(@type.to_sym, **@content_html) do
+        concat(tag.div(class: "flex") do
+          concat(anyicon(@icon, **@icon_html)) if @icon.present?
+          concat(content || @param_content)
+        end)
+        concat(chevron_right(class: "ms-3 ml-auto")) if items.any?
+      end)
+      concat(
+        inner_dropdown(items, id: @content_html["data-dropdown-toggle"], sizing: height, auto_divider: auto_divider)
+      ) if items.any?
+    end
+  end
+
+  private
+
+  def inner_dropdown(items, id: "a", sizing: 0, auto_divider: true)
+    props = { id: id, class: styles[:base] }
+    add to: props, class: [
+      styles[:sizes][sizing],
+      auto_divider ? styles[:auto_divider] : nil
+    ]
+
+    tag.div(**props) do
+      tag.ul(safe_join(items), class: styles[:ul])
+    end
+  end
+end

data/app/components/fluxbit/flex_component.rb

@@ -34,7 +34,7 @@ class Fluxbit::FlexComponent < Fluxbit::Component
   end
 
   def call
-    content_tag :div, content, @props
+    tag.div(content, **@props)
   end
 
   private

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

@@ -15,7 +15,7 @@ class Fluxbit::Form::Component < Fluxbit::Component
     if help_text.nil? && !object.nil? && !attribute.nil?
       help_text = I18n.t(
         attribute,
-        scope: [ :activerecord, :help_text, object.class.name.underscore.to_sym ],
+        scope: [ object.class.name.pluralize.underscore.to_sym, :help_text ],
         default: nil
       )
     end
@@ -24,14 +24,18 @@ class Fluxbit::Form::Component < Fluxbit::Component
   end
 
   def define_helper_popover(helper_popover, object, attribute)
-    return helper_popover if (helper_popover != false && !helper_popover.nil?) || object.nil?
+    return nil if helper_popover == false
+    return helper_popover if !helper_popover.nil? || object.nil?
 
-    object_name = object.class.name.underscore.to_sym
-    I18n.t(attribute, scope: [ :activerecord, :helper_popover, object_name ], default: nil)
+    I18n.t(attribute, scope: [ object.class.name.pluralize.underscore.to_sym, :helper_popover ], default: nil)
   end
 
   def label_value(label, object, attribute, id)
-    return object.class.human_attribute_name(attribute) if label.nil? && !object.nil? && !attribute.nil?
+    if label.nil? && !object.nil? && !attribute.nil?
+      key = [ object.class.name.pluralize.underscore.to_sym, :fields, attribute ]
+      return I18n.exists?(key) ? I18n.t(attribute, scope: key[0..-2]) : object.class.human_attribute_name(attribute)
+    end
+    return attribute.to_s.humanize if label.nil? && object.nil?
     return id.to_s.humanize if label.nil? && !id.nil?
     return label unless label.nil?
 
@@ -46,7 +50,8 @@ class Fluxbit::Form::Component < Fluxbit::Component
       color:                    @color,
       helper_popover:           @helper_popover,
       helper_popover_placement: @helper_popover_placement,
-      class:                    @label_class
+      class:                    @label_class,
+      required:                 @required
     ).with_content(@label).render_in(view_context)
   end
 
@@ -59,8 +64,10 @@ class Fluxbit::Form::Component < Fluxbit::Component
   def help_text
     return "" if @help_text.blank? || @help_text.compact.blank?
 
-    @help_text.compact.map do |text|
+    nodes = @help_text.compact.map do |text|
       Fluxbit::Form::HelpTextComponent.new(color: @color).with_content(text).render_in(view_context)
-    end.join.html_safe
+    end
+
+    view_context.safe_join(nodes)
   end
 end

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

@@ -19,7 +19,7 @@ class Fluxbit::Form::DropzoneComponent < Fluxbit::Form::FieldComponent
   # @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 icon_html [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
@@ -28,12 +28,12 @@ class Fluxbit::Form::DropzoneComponent < Fluxbit::Form::FieldComponent
     @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] }
+    @icon_html = @props.delete(:icon_html) || { class: styles[:icon] }
     @height = @props.delete(:height) || @@height
     add to: @props, class: "hidden"
   end
 
   def create_icon
-    anyicon(icon: @icon, class: styles[:icon])
+    anyicon(@icon, class: styles[:icon])
   end
 end