fluxbit_view_components 0.3.0 → 0.4.0

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

@@ -24,16 +24,17 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
   # @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_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 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`, `:failure`, etc)
+  # @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
@@ -48,13 +49,14 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
     @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) || {}
+    @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
@@ -67,9 +69,23 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
 
   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 :failure if errors.present?
+    return :danger if errors.present?
 
     @@color
   end
@@ -101,7 +117,7 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
     content_tag(
       tag,
       anyicon(
-        icon: icon_v,
+        icon_v,
         class: styles[:additional_icons][:class][@color]
       ),
       **props
@@ -109,20 +125,20 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
   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)
+    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_props
-    icon(@addon, tag: :span, props: @addon_props)
+    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_props
-    add(class: "pointer-events-none", to: @right_icon_props) unless events?(@right_icon_props)
-    icon(@right_icon, props: @right_icon_props)
+    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)
@@ -143,6 +159,7 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
     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)
@@ -150,13 +167,13 @@ class Fluxbit::Form::TextFieldComponent < Fluxbit::Form::FieldComponent
   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
+    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_props
-    content_tag :div, safe_join([ create_icon, create_right_icon, input ]), @div_props
+    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

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

@@ -27,7 +27,7 @@ class Fluxbit::Form::ToggleComponent < Fluxbit::Form::FieldComponent
   # @param name [String] Name of the field (required unless using form builder)
   # @param other_label [String] Additional label, rendered via slot (optional)
   # @param sizing [Integer] Size index for the toggle (default: config)
-  # @param color [Symbol] Checked toggle color (:default, :success, :failure, :info, :warning, etc)
+  # @param 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)
@@ -54,7 +54,7 @@ class Fluxbit::Form::ToggleComponent < Fluxbit::Form::FieldComponent
 
   def valid_color(color)
     return color if styles[:toggle][:checked].key?(color)
-    return :failure if errors.present?
+    return :danger if errors.present?
 
     @@color
   end

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

@@ -3,7 +3,7 @@
     <%= label %>
     <div class="mt-1 lg:hidden">
       <div class="flex items-center">
-        <div class="inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+        <div class="inline-block h-12 w-12 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
           <%= image_element %>
         </div>
         <div class="ml-5 rounded-md shadow-xs">
@@ -18,8 +18,8 @@
       </div>
     </div>
 
-    <div class="relative hidden overflow-hidden rounded-full lg:block w-40">
-      <div class="inline-block h-40 w-40 shrink-0 overflow-hidden rounded-full relative" aria-hidden="true">
+    <div class="relative hidden overflow-hidden <%= container_rounded_class %> lg:block w-40">
+      <div class="inline-block h-40 w-40 shrink-0 overflow-hidden <%= container_rounded_class %> relative" aria-hidden="true">
         <%= image_element %>
       </div>
       <label for="desktop-<%= id %>" class="absolute inset-0 flex flex-col h-full w-full items-center justify-center bg-blue-800/75 text-sm font-medium text-white opacity-0 hover:opacity-100">

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

@@ -22,11 +22,14 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
   # @param image_path [String] Path to the image to be displayed (optional)
   # @param image_placeholder [String] Placeholder image path if no image is attached (optional)
   # @param title [Boolean, String] Whether to show a title (true for default, false to hide, or custom string)
+  # @param rounded [Boolean] Whether to show image as circle (true, default) or square with rounded edges (false)
   # @param class [String] Additional CSS classes for the input element
   # @param ... any other HTML attribute supported by file_field_tag
   def initialize(**props)
     super(**props)
     @title = @props.delete(:title) || "Change"
+    @rounded = @props.delete(:rounded)
+    @rounded = true if @rounded.nil?
     @image_path = @props.delete(:image_path) ||
       (if @object&.send(@attribute).respond_to?(:attached?) && @object&.send(@attribute)&.send("attached?")
         @object&.send(@attribute)&.variant(resize_to_fit: [ 160, 160 ])
@@ -44,7 +47,15 @@ class Fluxbit::Form::UploadImageComponent < Fluxbit::Form::FieldComponent
 
   def image_element
     image_tag @image_path,
-              class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full object-cover rounded-full",
+              class: "img_photo_#{id} img_photo absolute inset-0 w-full h-full object-cover #{image_rounded_class}",
               alt: @attribute&.to_s&.humanize
   end
+
+  def container_rounded_class
+    @rounded ? "rounded-full" : "rounded-lg"
+  end
+
+  def image_rounded_class
+    @rounded ? "rounded-full" : "rounded-lg"
+  end
 end

data/app/components/fluxbit/gravatar_component.rb

@@ -24,6 +24,7 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
   # @option props [Symbol] :filetype (:png) The filetype of the Gravatar (:png, :jpg, :gif).
   # @option props [Symbol] :default (:identicon) The default image to use if no Gravatar is found.
   # @option props [Integer] :size (:md) The size of the Gravatar base on the size provided by AvatarComponent.
+  # @option props [Boolean] :url_only (false) If true, returns only the Gravatar URL instead of rendering the avatar component.
   # @option props [String] :remove_class ('') Classes to be removed from the default Gravatar class list.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the Gravatar container.
   def initialize(**props)
@@ -37,10 +38,16 @@ class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
     }
     add class: gravatar_styles[:base], to: @props
     @email = @props.delete(:email)
+    @url_only = @props.delete(:url_only)
     src = gravatar_url
     super(src: src, **@props)
   end
 
+  def call
+    return gravatar_url.html_safe if @url_only
+    super
+  end
+
   # The raw MD5 hash of the users' email. Gravatar is particularly tricky as
   # it downcases all emails. This is really the guts of the module,
   # everything else is just convenience.

data/app/components/fluxbit/icon_helpers.rb

@@ -0,0 +1,167 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module IconHelpers
+    def chevron_right(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 6 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 9 4-4-4-4")
+      end
+    end
+
+    def chevron_left(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 6 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m5 1-4 4 4 4")
+      end
+    end
+
+    def chevron_up(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 6"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 5 4-4 4 4")
+      end
+    end
+
+    def chevron_down(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 6"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "m1 1 4 4 4-4")
+      end
+    end
+
+    def close_icon(**props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 14 14"
+
+      tag.svg(**props) do
+        tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => 2, d: "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6")
+      end
+    end
+
+    def plus_icon(**props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "currentColor"
+      props[:viewBox] = "0 0 24 24"
+
+      tag.svg(**props) do
+        tag.path("fill-rule" => "evenodd", d: "M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z", "clip-rule" => "evenodd")
+      end
+    end
+
+    def chevron_double_left(**props)
+      add to: props, class: "w-3 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 10 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M4 1l-4 4 4 4"),
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M10 1l-4 4 4 4")
+        ]
+      end
+    end
+
+    def chevron_double_right(**props)
+      add to: props, class: "w-3 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 12 10"
+      stroke_width = props.delete(:stroke_width) || 2
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M2 1l4 4-4 4"),
+          tag.path(stroke: "currentColor", "stroke-linecap" => "round", "stroke-linejoin" => "round", "stroke-width" => stroke_width, d: "M8 1l4 4-4 4")
+        ]
+      end
+    end
+
+    def ellipsis_horizontal(**props)
+      add to: props, class: "w-2.5 h-2.5", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "currentColor"
+      props[:viewBox] = "0 0 10 2"
+
+      tag.svg(**props) do
+        safe_join [
+          tag.circle(cx: 1, cy: 1, r: 1),
+          tag.circle(cx: 5, cy: 1, r: 1),
+          tag.circle(cx: 9, cy: 1, r: 1)
+        ]
+      end
+    end
+
+    def eye_icon(**props)
+      add to: props, class: "size-4", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 24 24"
+      props[:"stroke-width"] = "1.5"
+      props[:stroke] = "currentColor"
+
+      tag.svg(**props) do
+        safe_join [
+          tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"),
+          tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z")
+        ]
+      end
+    end
+
+    def eye_slash_icon(**props)
+      add to: props, class: "size-4", first_element: true
+      remove_class_from_props(props)
+      props["aria-hidden"] = "true"
+      props[:xmlns] = "http://www.w3.org/2000/svg"
+      props[:fill] = "none"
+      props[:viewBox] = "0 0 24 24"
+      props[:"stroke-width"] = "1.5"
+      props[:stroke] = "currentColor"
+
+      tag.svg(**props) do
+        tag.path("stroke-linecap" => "round", "stroke-linejoin" => "round", d: "M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88")
+      end
+    end
+  end
+end

data/app/components/fluxbit/link_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+##
+##
+# The `Fluxbit::LinkComponent` is a customizable link component that extends {Fluxbit::Component}.
+# It provides a straightforward way to generate anchor elements (`<a>`) with configurable colors
+# and styling options. Additional HTML attributes can be passed to further control the component's
+# behavior and appearance.
+#
+# Example usage:
+#   = render Fluxbit::LinkComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
+#     "My Heading"
+#
+class Fluxbit::LinkComponent < Fluxbit::Component
+  include Fluxbit::Config::LinkComponent
+
+  ##
+  # Initializes the link component with the provided options.
+  #
+  # @param [Symbol] color (:default) The color style for the heading. Must be one of the keys defined in +styles[:colors]+.
+  # @param [Hash] props Additional HTML attributes to be applied to the heading element, such as +class+, +id+, +data-*, etc.
+  #
+  # @return [Fluxbit::LinkComponent]
+  #
+  # @example
+  #   = render Fluxbit::LinkComponent.new(color: :primary) do
+  #     "My Heading"
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @color = @props.delete(:color) || @@color
+
+    add to: @props, class: [ styles[:colors][@color], styles[:base] ]
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+    @href = @props.delete(:href) || "#"
+  end
+
+  def call
+    link_to content, @href, **@props
+  end
+end

data/app/components/fluxbit/modal_component.rb

@@ -23,10 +23,10 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   # @option props [Boolean] :only_css (false) Determines if the modal can be closed by clicking the backdrop, using a CSS-based approach.
   # @option props [Boolean] :static (false) If true, the modal will not close when clicking the backdrop or pressing the ESC key.
   # @option props [String] :remove_class ('') Classes to be removed from the default modal class list.
-  # @option props [Hash] :content_props ({}) Additional HTML attributes and classes for the content wrapper inside the modal.
-  # @option props [Hash] :header_props ({}) Additional HTML attributes and classes for the header section.
-  # @option props [Hash] :footer_props ({}) Additional HTML attributes and classes for the footer section.
-  # @option props [Hash] :close_button_props ({}) Additional HTML attributes and classes for the close button element.
+  # @option props [Hash] :content_html ({}) Additional HTML attributes and classes for the content wrapper inside the modal.
+  # @option props [Hash] :header_html ({}) Additional HTML attributes and classes for the header section.
+  # @option props [Hash] :footer_html ({}) Additional HTML attributes and classes for the footer section.
+  # @option props [Hash] :close_button_html ({}) Additional HTML attributes and classes for the close button element.
   # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the modal container.
   def initialize(**props)
     super
@@ -50,39 +50,35 @@ class Fluxbit::ModalComponent < Fluxbit::Component
     @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
 
     # Content properties
-    @content_props = @props.delete(:content_props) || {}
-    add(class: content_classes, to: @content_props, first_element: true)
-    @content_props[:class] = remove_class(@content_props.delete(:remove_class) || "", @content_props[:class])
+    @content_html = @props.delete(:content_html) || {}
+    add(class: content_classes, to: @content_html, first_element: true)
+    @content_html[:class] = remove_class(@content_html.delete(:remove_class) || "", @content_html[:class])
 
     # Header properties
-    @header_props = @props.delete(:header_props) || {}
-    add(class: header_classes, to: @header_props, first_element: true)
-    @header_props[:class] = remove_class(@header_props.delete(:remove_class) || "", @header_props[:class])
+    @header_html = @props.delete(:header_html) || {}
+    add(class: header_classes, to: @header_html, first_element: true)
+    @header_html[:class] = remove_class(@header_html.delete(:remove_class) || "", @header_html[:class])
 
     # Footer properties
-    @footer_props = @props.delete(:footer_props) || {}
-    add(class: footer_classes, to: @footer_props, first_element: true)
-    @footer_props[:class] = remove_class(@footer_props.delete(:remove_class) || "", @footer_props[:class])
+    @footer_html = @props.delete(:footer_html) || {}
+    add(class: footer_classes, to: @footer_html, first_element: true)
+    @footer_html[:class] = remove_class(@footer_html.delete(:remove_class) || "", @footer_html[:class])
 
     # Close button properties
-    @close_button_props = @props.delete(:close_button_props) || {}
-    add(class: styles[:header][:close][:base], to: @close_button_props, first_element: true)
-    @close_button_props[:class] = remove_class(@close_button_props.delete(:remove_class) || "", @close_button_props[:class])
-    @close_button_props[:type] = "button"
-    @close_button_props["data-modal-hide"] = @props[:id]
-    @close_button_props["aria-label"] = "Close"
+    @close_button_html = @props.delete(:close_button_html) || {}
+    add(class: styles[:header][:close][:base], to: @close_button_html, first_element: true)
+    @close_button_html[:class] = remove_class(@close_button_html.delete(:remove_class) || "", @close_button_html[:class])
+    @close_button_html[:type] = "button"
+    @close_button_html["data-modal-hide"] = @props[:id]
   end
 
   def call
-    content_tag(
-      :div,
-      **@props
-    ) do
-      content_tag(:div, **@content_props) do
-        content_tag(:div, class: styles[:content][:inner]) do
+    tag.div(**@props) do
+      tag.div(**@content_html) do
+        tag.div(class: styles[:content][:inner]) do
           concat(header) if title? || @title.present? || @close_button
-          concat(content_tag(:div, content, class: body_classes))
-          concat(content_tag(:div, footer, **@footer_props)) if footer?
+          concat(tag.div(content, class: body_classes))
+          concat(tag.div(footer, **@footer_html)) if footer?
         end
       end
     end
@@ -114,7 +110,7 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   def header
     return close_button if @close_button && !title? && !@title.present?
 
-    content_tag(:div, **@header_props) do
+    content_tag(:div, **@header_html) do
       concat(title) if title?
       concat(content_tag(:h3, @title, class: styles[:header][:title])) if @title.present?
       concat(close_button) if @close_button
@@ -126,12 +122,13 @@ class Fluxbit::ModalComponent < Fluxbit::Component
   end
 
   def close_button
+    @close_button_html["aria-label"] = t("fluxbit.modal.aria_close")
     content_tag(
       :button,
-      **@close_button_props
+      **@close_button_html
     ) do
-      concat content_tag(:span, "Dismiss", class: "sr-only")
-      concat anyicon(icon: "heroicons_outline:x-mark", class: "w-5 h-5")
+      concat content_tag(:span, t("fluxbit.modal.dismiss"), class: "sr-only")
+      concat close_icon(class: "size-3")
     end
   end