fluxbit_view_components 0.1.0

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::UploadImageInputComponent < Fluxbit::Form::Component
+  cattr_accessor :styles do
+    {
+      height: {
+        no: "",
+        sm: "h-32",
+        md: "h-64",
+        lg: "h-96"
+      }
+    }
+  end
+
+  def initialize(form: nil, field: nil, id: nil, height: :md, label: nil, helper_text: nil, helper_popover: nil,
+                 helper_popover_placement: "right", type: nil, image_path: nil, image_placeholder: nil,
+                 title: true, subtitle: true, **props)
+    super
+    @form = form
+    @object = form&.object
+    @field = field
+    @id = id
+    @title = title
+    @subtitle = subtitle
+    @props = props
+    # @height = height.in?(styles[:height].keys) ? height : :md
+    @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
+    # binding.pry
+    @image_path = image_path || (if @object&.send(@field)&.send("attached?")
+                                   @object&.send(@field)&.variant(
+                                     resize_to_fit: [
+                                       160, 160
+                                     ]
+                                   )
+                                 end) || image_placeholder
+    @props["class"] = "absolute inset-0 h-full w-full cursor-pointer rounded-md border-gray-300 opacity-0"
+  end
+
+  def input_element(input_id: nil)
+    @props["onchange"] = "loadFile(event, '#{id}')"
+    return content_tag :input, nil, @props.merge(id: input_id || id) if @form.nil?
+
+    @form.file_field(@field, **@props, id: input_id || id)
+  end
+
+  def image_element
+    image_tag @image_path,
+              class: "img_photo absolute inset-0 w-full h-full object-cover rounded-full",
+              alt:   @field&.to_s&.humanize
+  end
+
+  def title
+    return safe_join(content_tag(:span, "Click to upload", class: "font-semibold"), " or drag and drop") if @title == true
+
+    @title
+  end
+
+  def subtitle
+    return "SVG, PNG, JPG or GIF (MAX. 800x400px)" if @subtitle == true
+
+    @subtitle
+  end
+end

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

@@ -0,0 +1,12 @@
+<div class="<%= self.styles[:bae] %>">
+  <label for="<%= id %>" class="<%= self.styles[:label] %> <%= self.styles[:height][@height] %>">
+    <div class="<%= self.styles[:inner_div] %>">
+      <svg class="w-8 h-8 mb-4 text-slate-500 dark:text-slate-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+      </svg>
+      <p class="<%= self.styles[:title] %>"><%= title %></p>
+      <p class="<%= self.styles[:subtitle] %>"><%= subtitle %></p>
+    </div>
+    <input id="<%= id %>" name="<%= @name %>" type="file" class="hidden" />
+  </label>
+</div> 

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

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class Fluxbit::Form::UploadInputComponent < Fluxbit::Form::Component
+  # rubocop: disable Layout/LineLength
+  cattr_accessor :styles do
+    {
+      base: "flex items-center justify-center w-full",
+      label: "flex flex-col items-center justify-center w-full border-2 border-slate-300 border-dashed rounded-lg cursor-pointer bg-slate-50 dark:hover:bg-bray-800 dark:bg-slate-700 hover:bg-slate-100 dark:border-slate-600 dark:hover:border-slate-500 dark:hover:bg-slate-600",
+      inner_div: "flex flex-col items-center justify-center pt-5 pb-6",
+      title: "mb-2 text-sm text-slate-500 dark:text-slate-400",
+      subtitle: "text-xs text-slate-500 dark:text-slate-400",
+      height: {
+        no: "",
+        sm: "h-32",
+        md: "h-64",
+        lg: "h-96"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength
+
+  def initialize(form: nil, field: nil, id: nil, height: :md,
+                 title: true, subtitle: true, **props)
+    super
+    @form = form
+    @object = form&.object
+    @field = field
+    @id = id
+    @title = title
+    @subtitle = subtitle
+    @props = props
+    @height = height.in?(styles[:height].keys) ? height : :md
+  end
+
+  def title
+    return safe_join(content_tag(:span, "Click to upload", class: "font-semibold"),
+" or drag and drop") if @title == true
+
+    @title
+  end
+
+  def subtitle
+    return "SVG, PNG, JPG or GIF (MAX. 800x400px)" if @subtitle == true
+
+    @subtitle
+  end
+end

data/app/components/fluxbit/gravatar_component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+# From:
+# https://github.com/chrislloyd/gravtastic/blob/master/lib/gravtastic.rb
+# https://chrislloyd.github.io/gravtastic/
+
+require "digest/md5"
+
+# The `Fluxbit::GravatarComponent` is a component for rendering Gravatar avatars.
+# It extends `Fluxbit::AvatarComponent` and provides options for configuring the
+# Gravatar's appearance and behavior. You can control the Gravatar's rating, size,
+# filetype, and other attributes. The Gravatar URL is constructed based on the
+# provided email address and options.
+class Fluxbit::GravatarComponent < Fluxbit::AvatarComponent
+  include Fluxbit::Config::AvatarComponent
+  include Fluxbit::Config::GravatarComponent
+
+  # Initializes the Gravatar component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the Gravatar.
+  # @option props [String] :email The email address associated with the Gravatar.
+  # @option props [Symbol] :rating (:g) The rating of the Gravatar (:g, :pg, :r, :x).
+  # @option props [Boolean] :secure (true) Whether to use HTTPS for the Gravatar URL.
+  # @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 [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)
+    @props = props
+    @gravatar_options = {
+      rating: options((@props.delete(:rating)|| "").to_sym, collection: gravatar_styles[:rating], default: @@rating),
+      secure: options(@props.delete(:secure), default: true),
+      filetype: options((@props.delete(:filetype)|| "").to_sym, collection: gravatar_styles[:filetype], default: @@filetype),
+      default: options((@props.delete(:default)|| "").to_sym, collection: gravatar_styles[:default], default: @@default),
+      size: gravatar_styles[:size][options(@props[:size], collection: gravatar_styles[:size], default: @@size)]
+    }
+    add class: gravatar_styles[:base], to: @props
+    @email = @props.delete(:email)
+    src = gravatar_url
+    super(src: src, **@props)
+  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.
+  def gravatar_id
+    Digest::MD5.hexdigest(@email.to_s.downcase)
+  end
+
+  # Constructs the full Gravatar url.
+  def gravatar_url
+    gravatar_hostname(@gravatar_options.delete(:secure)) +
+      gravatar_filename(@gravatar_options.delete(:filetype)) +
+      "?#{url_params_from_hash(process_options(@gravatar_options))}"
+  end
+
+  # Creates a params hash like "?foo=bar" from a hash like {'foo' => 'bar'}.
+  # The values are sorted so it produces deterministic output (and can
+  # therefore be tested easily).
+  def url_params_from_hash(hash)
+    hash.map do |key, val|
+      [ gravatar_abbreviations[key.to_sym] || key.to_s, val.to_s ].join("=")
+    end.sort.join("&")
+  end
+
+  # Returns either Gravatar's secure hostname or not.
+  def gravatar_hostname(secure)
+    "http#{secure ? 's://secure.' : '://'}gravatar.com/avatar/"
+  end
+
+  # Munges the ID and the filetype into one. Like "abc123.png"
+  def gravatar_filename(filetype)
+    "#{gravatar_id}.#{filetype}"
+  end
+
+  # Some options need to be processed before becoming URL params
+  def process_options(options_to)
+    processed_options = {}
+    options_to.each do |key, val|
+      case key
+      when :forcedefault
+        processed_options[key] = "y" if val
+      else
+        processed_options[key] = val
+      end
+    end
+    processed_options
+  end
+
+  def gravatar_abbreviations
+    {
+      size:         "s",
+      default:      "d",
+      rating:       "r",
+      forcedefault: "f"
+    }
+  end
+end

data/app/components/fluxbit/heading_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::HeadingComponent` is a customizable heading component that extends {Fluxbit::Component}.
+# It provides a straightforward way to generate heading elements (`<h1>` through `<h6>`) with
+# configurable sizes, letter spacing, and line heights. Additional HTML attributes can be
+# passed to further control the component’s behavior and styling.
+#
+# Example usage:
+#   = render Fluxbit::HeadingComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
+#     "My Heading"
+#
+class Fluxbit::HeadingComponent < Fluxbit::Component
+  include Fluxbit::Config::HeadingComponent
+
+  ##
+  # Initializes the heading component with the provided options.
+  #
+  # @param [Integer] size (1) The heading level (1 through 6). Determines whether the component is `<h1>`, `<h2>`, etc.
+  # @param [Symbol] spacing (:tight) The letter spacing style for the heading. Must be one of the keys defined in +styles[:spacings]+.
+  # @param [Symbol] line_height (:none) The line height style for the heading. Must be one of the keys defined in +styles[:line_heights]+.
+  # @param [Hash] props Additional HTML attributes to be applied to the heading element, such as +class+, +id+, +data-*, etc.
+  #
+  # @return [Fluxbit::HeadingComponent]
+  #
+  # @example
+  #   = render Fluxbit::HeadingComponent.new(size: 2, spacing: :wider, line_height: :relaxed) do
+  #     "My Heading"
+  #
+  def initialize(size: nil, spacing: nil, line_height: nil, **props)
+    super
+    @props = props
+    @base_component = "h#{size || @@size}".to_sym
+
+    add to: @props, class: [
+      styles[:base],
+      styles[:sizes][@base_component],
+      styles[:spacings][spacing || @@spacing],
+      styles[:line_heights][line_height || @@line_height]
+    ]
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    content_tag @base_component, content, **@props
+  end
+end

data/app/components/fluxbit/modal_component.rb

@@ -0,0 +1,141 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::ModalComponent` is a component for rendering customizable modals.
+# It extends `Fluxbit::Component` and provides options for configuring the modal's
+# appearance, behavior, and content areas. You can control the modal's title, size,
+# placement, backdrop behavior, and other interactive elements. The modal is divided
+# into different sections (header, content, and footer), each of which can be
+# styled or customized through various properties.
+class Fluxbit::ModalComponent < Fluxbit::Component
+  include Fluxbit::Config::ModalComponent
+  renders_one :title
+  renders_one :footer
+
+  # Initializes the modal component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the modal.
+  # @option props [String] :title (nil) The title text displayed in the modal header.
+  # @option props [Boolean] :opened (false) Determines if the modal is initially open (visible).
+  # @option props [Boolean] :close_button (true) Determines if a close button should be displayed in the header.
+  # @option props [Boolean] :flat (false) Applies a "flat" style (implementation-defined).
+  # @option props [Symbol, Integer] :size (1) The size of the modal (e.g., 0 to 9).
+  # @option props [Symbol, String] :placement (nil) The placement of the modal (e.g., :center, :top, :bottom).
+  # @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] **props Remaining options declared as HTML attributes, applied to the modal container.
+  def initialize(**props)
+    super
+
+    # Main properties
+    @props = props
+    @title = @props.delete(:title)
+    @opened = options(@props.delete(:opened), default: @@opened)
+    @close_button = options(@props.delete(:close_button), default: @@close_button)
+    @flat = options(@props.delete(:flat), default: @@flat)
+    @size = options(@props.delete(:size), default: @@size)
+    @placement = options(@props.delete(:placement), default: @@placement)
+    @only_css = options(@props.delete(:only_css), default: @@only_css)
+    @static = options(@props.delete(:static), default: @@static)
+
+    add(class: modal_classes, to: @props, first_element: true)
+    @props["data-modal-placement"] = @placement.to_s if @placement
+    @props["aria-hidden"] = !@opened
+    @props["data-modal-backdrop"] = "static" if @static
+    @props["onclick"] = "if(event.target === this) this.classList.add('hidden')" if @only_css && !@static
+    @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])
+
+    # 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])
+
+    # 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])
+
+    # 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"
+  end
+
+  def call
+    content_tag(
+      :div,
+      **@props
+    ) do
+      content_tag(:div, **@content_props) do
+        content_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?
+        end
+      end
+    end
+  end
+
+  private
+
+  def content_classes
+    [ styles[:content][:base], styles[:root][:size][@size] ].join(" ")
+  end
+
+  def modal_classes
+    [
+      styles[:root][:base],
+      styles[:root][:show][@opened ? :on : :off],
+      (@only_css ? styles[:root][:backdrop] : ""),
+      (@only_css ? styles[:root][:placements][@placement || :center] : "")
+    ].join(" ")
+  end
+
+  def body_classes
+    [
+      styles[:body][:base],
+      (@flat ? styles[:body][:flat] : nil),
+      (@close_button && !title? && !@title.present? ? styles[:body][:no_title] : "")
+    ].compact.join(" ")
+  end
+
+  def header
+    return close_button if @close_button && !title? && !@title.present?
+
+    content_tag(:div, **@header_props) do
+      concat(title) if title?
+      concat(content_tag(:h3, @title, class: styles[:header][:title])) if @title.present?
+      concat(close_button) if @close_button
+    end
+  end
+
+  def header_classes
+    [ styles[:header][:base], (@flat ? styles[:header][:flat] : nil) ].compact.join(" ")
+  end
+
+  def close_button
+    content_tag(
+      :button,
+      **@close_button_props
+    ) do
+      concat content_tag(:span, "Dismiss", class: "sr-only")
+      concat anyicon(icon: "heroicons_outline:x-mark", class: "w-5 h-5")
+    end
+  end
+
+  def footer_classes
+    [ styles[:footer][:base], (@flat ? styles[:footer][:flat] : nil) ].compact.join(" ")
+  end
+end

data/app/components/fluxbit/popover_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::PopoverComponent` is a component for rendering customizable popovers.
+# It extends `Fluxbit::Component` and provides options for configuring the popover's
+# appearance, behavior, and content areas. You can control the popover's trigger,
+# placement, and other interactive elements. The popover is divided into different
+# sections (trigger and content), each of which can be styled or customized through
+# various properties.
+class Fluxbit::PopoverComponent < Fluxbit::Component
+  include Fluxbit::Config::PopoverComponent
+
+  # Initializes the popover component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the popover.
+  # @option props [String] :title (nil) The title text displayed in the popover.
+  # @option props [Boolean] :has_arrow (true) Determines if an arrow should be displayed on the popover.
+  # @option props [String] :image (nil) The URL of an image to be displayed in the popover.
+  # @option props [Symbol] :image_position (:right) The position of the image relative to the content (:left or :right).
+  # @option props [Hash] :image_props ({}) Additional HTML attributes for the image element.
+  # @option props [Symbol, String] :size (2) The size of the popover (0 to 4).
+  # @option props [String] :remove_class ('') Classes to be removed from the default popover class list.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the popover container.
+  def initialize(**props)
+    super
+    @props = props
+    @title = @props.delete(:title)
+    @has_arrow = options @props.delete(:has_arrow), default: @@has_arrow
+    @image = @props.delete(:image)
+    @image_position = options @props.delete(:image_position), default: @@image_position
+    @image_props = options @props.delete(:image_props), default: @@image_props
+    @props["data-popover"] = "data-popover"
+    @props["role"] = "tooltip"
+
+    add(class: [ styles[:base], styles[:size][@props.delete(:size) || @@size] ], to: @props)
+    add(class: styles[:image_content][:image], to: @image_props)
+    @image_props[:src] = @image
+
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+    @image_props[:class] = remove_class(@props.delete(:remove_class) || "", @image_props[:class])
+  end
+
+  def call
+    content_tag :div, @props do
+      concat div_title unless @title.blank?
+      concat (content_tag(:div, class: styles[@image.blank? ? :content : :image_base]) do
+        if @image.blank?
+          content
+        else
+          if @image_position == :left
+            concat content_tag(:img, nil, @image_props)
+            concat content_tag(:div, content, class: styles[:image_content][:text])
+          else
+            concat content_tag(:div, content, class: styles[:image_content][:text])
+            concat content_tag(:img, nil, @image_props)
+          end
+        end
+      end)
+      concat popper_arrow if @has_arrow
+    end
+  end
+
+  def popper_arrow
+    content_tag :div, "", "data-popper-arrow" => true
+  end
+
+  def div_title
+    content_tag :div, class: styles[:title][:div] do
+      content_tag :h3, @title, class: styles[:title][:h3]
+    end
+  end
+end

data/app/components/fluxbit/tab_component.rb

@@ -0,0 +1,142 @@
+# frozen_string_literal: true
+
+class Fluxbit::TabComponent < Fluxbit::Component
+  include Fluxbit::Config::TabComponent
+
+  attr_reader :variant, :lazy_load
+
+  renders_many :tabs, lambda { |**props, &block|
+    begin
+      @tabs_group << ComponentObj.new(props, view_context.capture(&block))
+    rescue
+      @tabs_group << ComponentObj.new(props, nil)
+    end
+  }
+
+  def initialize(**props)
+    @variant = (props.delete(:variant) || @@variant).to_sym
+    @color = props.delete(:color) || @@color
+    @vertical = props.delete(:vertical) || @@vertical
+    @tab_panel = (props.delete(:tab_panel) || @@tab_panel).to_sym
+    @tabs_group = []
+    @ul_props = props.delete(:ul_props) || {}
+    @props = props
+    @vertical = false if @variant == :full_width
+    super
+  end
+
+  def call
+    tabs
+    @has_panels = @tabs_group.map(&:content).compact.present?
+    add class: styles[:div][@vertical ? :vertical : :horizontal], to: @props, first_element: true
+
+    if @has_panels
+      content_tag :div, **@props do
+        concat(render_tab_list)
+        concat(render_tab_panels)
+      end
+    else
+      concat(render_tab_list)
+    end
+  end
+
+  private
+
+  def render_tab_list
+    add class: styles[:tab_list][:ul][@vertical ? :vertical : :horizontal], to: @ul_props, first_element: true
+    add class: styles[:tab_list][:variant][variant], to: @ul_props
+    @ul_props[:role] = "tablist"
+
+    if @has_panels
+      @ul_props[:data] = {
+        "tabs-toggle": "##{fx_id}-content",
+        "tabs-active-classes": styles[:tab_list][:tab_item][:variant][variant][:active][@color],
+        "tabs-inactive-classes": styles[:tab_list][:tab_item][:variant][variant][:inactive]
+      }
+    end
+
+    @ul_props[:id] = fx_id
+
+    content_tag :ul, **@ul_props do
+      safe_join(@tabs_group.map.with_index { |tab, index| render_tab(tab, index) })
+    end
+  end
+
+  def variant_color_style(active, disabled)
+    if active
+      styles[:tab_list][:tab_item][:variant][variant][:active][@color]
+    elsif disabled
+      styles[:tab_list][:tab_item][:variant][variant][:disabled]
+    else
+      styles[:tab_list][:tab_item][:variant][variant][:inactive]
+    end
+  end
+
+  def render_tab(tab, index)
+    tab_icon = tab.props.delete(:icon)
+    tab_title = tab.props.delete(:title)
+    tab_active = tab.props.delete(:active)
+
+    add class: [
+      styles[:tab_list][:tab_item][:base],
+      styles[:tab_list][:tab_item][:variant][variant][:base],
+      variant_color_style(tab_active, tab.props[:disabled])
+    ], to: tab.props, first_element: true
+
+    add(class: styles[:tab_list][:tab_item][:variant][variant][:first], to: tab.props) if index.zero? && styles[:tab_list][:tab_item][:variant][variant][:first].present?
+    add(class: styles[:tab_list][:tab_item][:variant][variant][:last], to: tab.props) if index == @tabs_group.size - 1 && styles[:tab_list][:tab_item][:variant][variant][:last].present?
+    add(class: styles[:tab_list][:tab_item][:variant][variant][:middle], to: tab.props) if index > 0 && index < @tabs_group.size - 1 && styles[:tab_list][:tab_item][:variant][variant][:middle].present?
+
+    tab.props[:role] = "tab"
+    tab.props[:"aria-selected"] = tab.props[:active].to_s
+    tab.props[:"aria-controls"] = "#{fx_id}-tabpanel-#{index}"
+    tab.props[:id] = "#{fx_id}-#{index}"
+    tab.props[:type] = "button"
+    tab.props[:data] = { "tabs-target": "##{fx_id}-tabpanel-#{index}" }
+    tab.props[:href] = "#" if tab.props[:href].blank?
+
+    if tab.props[:disabled].present? && tab.props[:disabled]
+      tab.props.delete :href
+      tab.props.delete :role
+      tab.props.delete :"aria-selected"
+      tab.props.delete :"aria-controls"
+    end
+
+    li_props = tab.props.delete(:li_props) || {}
+    li_props[:role] = "presentation"
+    li_props[:id] = "#{fx_id}-#{index}-li"
+    add class: styles[:tab_list][:li], to: li_props, first_element: true
+
+    content_tag :li, **li_props do
+      content_tag :a, **tab.props do
+        concat(render_icon(tab_icon)) if tab_icon
+        concat(content_tag(:span, tab_title))
+      end
+    end
+  end
+
+  def render_icon(icon)
+    if icon.include?('class="')
+      icon.gsub("class=\"", "class=\"#{styles[:tab_list][:tab_item][:icon]} ")
+    else
+      icon.gsub("<svg", "<svg class=\"#{styles[:tab_list][:tab_item][:icon]}\"")
+    end.html_safe
+  end
+
+  def render_tab_panels
+    content_tag :div, id: "##{fx_id}-content", class: styles[:tabpanel_container][@vertical ? :vertical : :horizontal] do
+      safe_join(@tabs_group.map.with_index { |tab, index| render_tabpanel(tab, index) })
+    end
+  end
+
+  def render_tabpanel(tab, index)
+    content_props = tab.props[:content_props] || {}
+    add class: styles[:tabpanel][@vertical ? :vertical : :horizontal][@tab_panel][tab.props[:active] ? :active : :inactive], to: content_props, first_element: true
+
+    content_props[:id] = "#{fx_id}-tabpanel-#{index}"
+    content_props[:role] = "tabpanel"
+    content_props[:"aria-labelledby"] = "#{fx_id}-#{index}"
+
+    content_tag :div, tab.content, **content_props
+  end
+end

data/app/components/fluxbit/text_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TextComponent` is a component for rendering customizable text elements.
+# It extends `Fluxbit::Component` and provides options for configuring the text's
+# appearance and behavior. You can control the text's tag, styles, and other attributes.
+# The text can be rendered as different HTML tags (e.g., span, div) and can have various
+# styles applied based on the provided properties.
+class Fluxbit::TextComponent < Fluxbit::Component
+  include Fluxbit::Config::TextComponent
+
+  # Initializes the text component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the text.
+  # @option props [Symbol] :as (:span) The HTML tag to use for the text element.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the text element.
+  def initialize(**props)
+    super
+    @props = props.compact
+    @as = @props.delete(:as) || :span
+
+    styles.each do |style_type, style_values|
+      if @props.key?(style_type)
+        element = @props.delete(style_type)
+        if style_values.is_a?(Array)
+          add(class: style_values[element.to_i], to: @props)
+        else
+          add(class: style_values[element.to_sym], to: @props) if style_values.key?(element.to_sym)
+        end
+      end
+    end
+  end
+
+  def call
+    content_tag @as, content, @props
+  end
+end