fluxbit_view_components 0.3.0 → 0.4.0

data/app/components/fluxbit/stepper_component.rb

@@ -0,0 +1,223 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::StepperComponent` is a customizable stepper component that extends `Fluxbit::Component`.
+# It provides a visual representation of a multi-step process, supporting both horizontal and vertical orientations
+# with various styling options including different colors and states.
+#
+# @example Basic usage
+#   = fx_stepper do |stepper|
+#     = stepper.with_step(title: "Step 1", state: :completed)
+#     = stepper.with_step(title: "Step 2", state: :active)
+#     = stepper.with_step(title: "Step 3")
+#   end
+#
+# @see docs/02_Components/Stepper.md For detailed documentation.
+class Fluxbit::StepperComponent < Fluxbit::Component
+  include Fluxbit::Config::StepperComponent
+
+  renders_many :steps, lambda { |**attrs, &block|
+    step = Step.new(**attrs)
+    step.with_content(block.call) if block_given?
+    step
+  }
+
+  ##
+  # Initializes the stepper component with the given properties.
+  #
+  # @param [Hash] **props The properties to customize the stepper.
+  # @option props [Symbol] :orientation (:horizontal) The orientation of the stepper (:horizontal, :vertical).
+  # @option props [Symbol] :variant (:default) The variant of the stepper (:default, :progress, :detailed).
+  # @option props [Symbol] :color (:blue) The color theme of the active step (:blue, :green, :red, :yellow, :indigo, :purple).
+  # @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::StepperComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @orientation = options @props.delete(:orientation), collection: styles[:base].keys, default: @@orientation
+    @variant = options @props.delete(:variant), collection: styles[:list].keys, default: @@variant
+    @color = options @props.delete(:color), collection: styles[:step][:default][:active].keys, default: @@color
+
+    add class: styles[:base][@orientation], to: @props, first_element: true
+    remove_class_from_props(@props)
+  end
+
+  def call
+    tag.div(**@props) do
+      tag.ol(class: styles[:list][@variant][@orientation]) do
+        safe_join(steps.map.with_index { |step, index| render_step(step, index) })
+      end
+    end
+  end
+
+  private
+
+  def render_step(step, index)
+    last_step = index == steps.count - 1
+
+    content_tag(:li, class: step_item_classes) do
+      if @orientation == :vertical && @variant != :detailed
+        # Vertical layout: wrapper div for proper positioning
+        concat(
+          tag.div(class: styles[:layout][:wrapper]) do
+            content = []
+            content << tag.div(class: styles[:layout][:flex_center]) do
+              concat(render_step_indicator(step))
+              concat(render_step_content(step)) if step.title.present? || step.description.present? || step.content.present?
+            end
+            content << render_vertical_connector(step) unless last_step
+            safe_join(content)
+          end
+        )
+      elsif @orientation == :vertical && @variant == :detailed
+        # Detailed vertical: no connectors, just cards
+        concat(render_step_indicator(step))
+        concat(render_step_content(step)) if step.title.present? || step.description.present? || step.content.present?
+      else
+        # Horizontal layout: standard flow with connectors
+        concat(render_step_indicator(step))
+        concat(render_step_content(step)) if step.title.present? || step.description.present? || step.content.present?
+        concat(render_connector(step)) unless last_step
+      end
+    end
+  end
+
+  def step_item_classes
+    styles[:item][@variant][@orientation]
+  end
+
+  def render_step_indicator(step)
+    tag.div(class: step_circle_classes(step)) do
+      if step.icon.present?
+        anyicon(step.icon, class: styles[:step_icon][@variant][:completed])
+      elsif step.state == :completed && @variant == :progress
+        content_tag(:span, "✓", class: step_number_classes(step))
+      else
+        content_tag(:span, step.number || "", class: step_number_classes(step))
+      end
+    end
+  end
+
+  def render_step_content(step)
+    return "" unless step.title.present? || step.description.present? || step.content.present?
+
+    tag.div(class: styles[:content][@variant][@orientation]) do
+      content = []
+
+      content << tag.h3(step.title, class: step_title_classes(step)) if step.title.present?
+      content << tag.p(step.description, class: styles[:description]) if step.description.present?
+      content << step.content if step.content.present?
+
+      safe_join(content)
+    end
+  end
+
+  def render_connector(step)
+    return "" if @orientation == :horizontal && steps.count <= 1
+
+    connector_classes = if step.state == :completed
+                          styles[:connector][:completed][@variant][@orientation]
+                        elsif step.state == :active
+                          styles[:connector][:active][@color][@variant][@orientation]
+                        else
+                          styles[:connector][@variant][@orientation]
+                        end
+
+    tag.div(class: connector_classes)
+  end
+
+  def render_vertical_connector(step)
+    # Position based on variant (different circle sizes)
+    left_position = styles[:vertical_connector][:positions][@variant] || styles[:vertical_connector][:positions][:default]
+
+    connector_classes = [
+      styles[:vertical_connector][:base],
+      left_position,
+      vertical_connector_color(step)
+    ].compact.join(" ")
+
+    tag.div(class: connector_classes)
+  end
+
+  def vertical_connector_color(step)
+    case step.state
+    when :completed
+      styles[:vertical_connector][:colors][:completed]
+    when :active
+      styles[:vertical_connector][:colors][@color] || styles[:vertical_connector][:colors][:blue]
+    else
+      styles[:vertical_connector][:colors][:default]
+    end
+  end
+
+  def step_circle_classes(step)
+    case step.state
+    when :completed
+      styles[:step][@variant][:completed]
+    when :active
+      styles[:step][@variant][:active][@color]
+    else
+      styles[:step][@variant][:base]
+    end
+  end
+
+  def step_number_classes(step)
+    case step.state
+    when :completed
+      styles[:step_number][@variant][:completed]
+    when :active
+      styles[:step_number][@variant][:active][@color]
+    else
+      styles[:step_number][@variant][:base]
+    end
+  end
+
+  def step_title_classes(step)
+    case step.state
+    when :completed
+      styles[:title][:completed]
+    when :active
+      styles[:title][:active][@color]
+    else
+      styles[:title][:base]
+    end
+  end
+
+  # Nested step component
+  class Step < Fluxbit::Component
+    include Fluxbit::Config::StepperComponent
+
+    attr_reader :title, :description, :state, :number, :icon
+
+    ##
+    # Initializes a step item for the stepper.
+    #
+    # @param [Hash] **props The properties to customize the step.
+    # @option props [String] :title The title of the step.
+    # @option props [String] :description The description of the step.
+    # @option props [Symbol] :state (:pending) The state of the step (:pending, :active, :completed).
+    # @option props [String, Integer] :number The step number or custom text.
+    # @option props [String] :icon The icon name to display for completed state.
+    #
+    # @return [Fluxbit::StepperComponent::Step]
+    def initialize(**props)
+      super
+      @props = props
+
+      @title = @props.delete(:title)
+      @description = @props.delete(:description)
+      @state = options @props.delete(:state), collection: [ :pending, :active, :completed ], default: :pending
+      @number = @props.delete(:number)
+      @icon = @props.delete(:icon)
+
+      remove_class_from_props(@props)
+    end
+
+    def call
+      content
+    end
+  end
+end

data/app/components/fluxbit/tab_component.rb

@@ -13,13 +13,24 @@ class Fluxbit::TabComponent < Fluxbit::Component
     end
   }
 
+  # Initializes the Tab component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the Tab component.
+  # @option props [Symbol] :variant (:default) The variant style (:default, :underline, :pills, :full_width).
+  # @option props [Symbol] :color (:blue) The color theme for active tabs.
+  # @option props [Boolean] :vertical (false) Whether tabs should be displayed vertically.
+  # @option props [Symbol] :tab_panel (:default) The style for tab panels (:default, :none).
+  # @option props [Symbol] :align (:left) Horizontal alignment of tabs (:left, :center, :right). Only applies to horizontal tabs.
+  # @option props [Hash] :ul_html ({}) HTML attributes to apply to the ul element.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the tab container.
   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
+    @align = (props.delete(:align) || @@align).to_sym
     @tabs_group = []
-    @ul_props = props.delete(:ul_props) || {}
+    @ul_html = props.delete(:ul_html) || {}
     @props = props
     @vertical = false if @variant == :full_width
     super
@@ -31,7 +42,7 @@ class Fluxbit::TabComponent < Fluxbit::Component
     add class: styles[:div][@vertical ? :vertical : :horizontal], to: @props, first_element: true
 
     if @has_panels
-      content_tag :div, **@props do
+      tag.div(**@props) do
         concat(render_tab_list)
         concat(render_tab_panels)
       end
@@ -43,21 +54,22 @@ class Fluxbit::TabComponent < Fluxbit::Component
   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"
+    add class: styles[:tab_list][:ul][@vertical ? :vertical : :horizontal], to: @ul_html, first_element: true
+    add class: styles[:tab_list][:variant][variant], to: @ul_html
+    add class: styles[:tab_list][:align][@align], to: @ul_html unless @vertical
+    @ul_html[:role] = "tablist"
 
     if @has_panels
-      @ul_props[:data] = {
+      @ul_html[: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
+    @ul_html[:id] = fx_id
 
-    content_tag :ul, **@ul_props do
+    tag.ul(**@ul_html) do
       safe_join(@tabs_group.map.with_index { |tab, index| render_tab(tab, index) })
     end
   end
@@ -102,41 +114,48 @@ class Fluxbit::TabComponent < Fluxbit::Component
       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
+    li_html = tab.props.delete(:li_html) || {}
+    li_html[:role] = "presentation"
+    li_html[:id] = "#{fx_id}-#{index}-li"
+    add class: styles[:tab_list][:li], to: li_html, first_element: true
 
-    content_tag :li, **li_props do
-      content_tag :a, **tab.props do
+    tag.li(**li_html) do
+      tag.a(**tab.props) do
         concat(render_icon(tab_icon)) if tab_icon
-        concat(content_tag(:span, tab_title))
+        concat(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]} ")
+    return "" if icon.blank?
+
+    modified = 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
+
+    allowed_tags = %w[svg path circle rect line polyline polygon g defs title use]
+    allowed_attrs = %w[class fill stroke stroke-width stroke-linecap stroke-linejoin width height viewBox xmlns x y d points cx cy r x1 y1 x2 y2 href aria-hidden]
+
+    view_context.sanitize(modified, tags: allowed_tags, attributes: allowed_attrs)
   end
 
   def render_tab_panels
-    content_tag :div, id: "##{fx_id}-content", class: styles[:tabpanel_container][@vertical ? :vertical : :horizontal] do
+    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_html = tab.props[:content_html] || {}
+    add class: styles[:tabpanel][@vertical ? :vertical : :horizontal][@tab_panel][tab.props[:active] ? :active : :inactive], to: content_html, first_element: true
 
-    content_props[:id] = "#{fx_id}-tabpanel-#{index}"
-    content_props[:role] = "tabpanel"
-    content_props[:"aria-labelledby"] = "#{fx_id}-#{index}"
+    content_html[:id] = "#{fx_id}-tabpanel-#{index}"
+    content_html[:role] = "tabpanel"
+    content_html[:"aria-labelledby"] = "#{fx_id}-#{index}"
 
-    content_tag :div, tab.content, **content_props
+    tag.div(tab.content, **content_html)
   end
 end

data/app/components/fluxbit/table_component.rb

@@ -0,0 +1,186 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::TableComponent` 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::TableComponent.new(
+#     striped: true,
+#     bordered: true,
+#     hover: true,
+#     shadow: true,
+#     wrapper_html: { class: "my-custom-wrapper" },
+#     thead_html: { class: "my-custom-thead" },
+#     tbody_html: { class: "my-custom-tbody" },
+#     tr_html: { class: "my-custom-tr" }
+#   ) do |table|
+#     table.with_header do |header|
+#       header.with_column "Column 1"
+#       header.with_column "Column 2"
+#     end
+#
+#     table.with_row do |row|
+#       row.with_cell "Data 1"
+#       row.with_cell "Data 2"
+#     end
+#   end
+#
+class Fluxbit::TableComponent < Fluxbit::Component
+  include Fluxbit::Config::TableComponent
+
+  renders_one :footer, lambda { |*args, **props, &block|
+    add class: styles[:footer][:base], to: props
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :td
+    props[:cells_html][:scope] ||= :row
+    add(class: styles[:footer][:cell], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  renders_many :headers, lambda { |*args, **props, &block|
+    add class: styles[:head][:base], to: props
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :th
+    props[:cells_html][:scope] ||= :col
+    add(class: styles[:head][:cell], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  renders_many :rows, lambda { |*args, **props, &block|
+    color = props.delete(:color) || :default
+    add(class: styles[:row][:base], to: props)
+    add(class: styles[:row][:striped][color], to: props) if @striped
+    add(class: styles[:row][:hovered][color], to: props) if @hover
+    add(class: styles[:row][:bordered], to: props) if @bordered
+    add(class: styles[:row][:colors][color], to: props, first_element: true) if styles[:row][:colors].key?(color) && !@striped
+    props[:as] ||= :tr
+    remove_class_from_props props
+
+    props[:cells_html] ||= {}
+    props[:cells_html][:as] ||= :td
+    props[:cells_html][:scope] ||= :row
+    add(class: styles[:row][:cell][:base], to: props[:cells_html])
+    remove_class_from_props props[:cells_html]
+
+    Fluxbit::TableGroupComponent.new(*args, **props, &block)
+  }
+
+  ##
+  # 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] :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::TableComponent.new(
+  #     striped: true,
+  #     bordered: true,
+  #     hover: true,
+  #     shadow: true,
+  #     thead_html: { class: "my-custom-thead" },
+  #     tbody_html: { class: "my-custom-tbody" },
+  #     tr_html: { class: "my-custom-tr" }
+  #   ) do |table|
+  #     table.with_header do |header|
+  #       header.with_column "Column 1"
+  #       header.with_column "Column 2"
+  #     end
+  #
+  #     table.with_row do |row|
+  #       row.with_cell "Data 1"
+  #       row.with_cell "Data 2"
+  #     end
+  #   end
+  #
+  # @return [Fluxbit::TableComponent]
+  #
+  def initialize(**props)
+    super
+    @props = props
+    @striped = options @props.delete(:striped), default: @@striped
+    @bordered = options @props.delete(:bordered), default: @@bordered
+    @hover = options @props.delete(:hover), default: @@hover
+    @shadow = options @props.delete(:shadow), default: @@shadow
+    @only_rows = options @props.delete(:only_rows), default: false
+
+    # Wrapper HTML
+    @wrapper_html = @props.delete(:wrapper_html) || {}
+    add(class: styles[:wrapper][:base], to: @wrapper_html)
+    add(class: styles[:wrapper][:shadow], to: @wrapper_html) if @shadow
+
+    # Head HTML
+    @thead_html = @props.delete(:thead_html) || {}
+    # add(class: styles[:head][:base], to: @thead_html)
+
+    # Body HTML
+    @tbody_html = @props.delete(:tbody_html) || {}
+    add(class: styles[:body][:base], to: @tbody_html)
+
+    # Row HTML
+    @tr_html = @props.delete(:tr_html) || {}
+    add(class: styles[:body][:base], to: @tbody_html)
+
+    # Footer HTML
+    @tfoot_html = @props.delete(:tfoot_html) || {}
+    add(class: styles[:footer][:base], to: @tfoot_html)
+
+    # Table HTML
+    add(class: styles[:root][:base], to: @props)
+  end
+
+  def call
+    return safe_join(rows) if @only_rows && rows?
+
+    # Wrapper
+    capture do
+      # Table
+      concat(tag.div(**@wrapper_html) do
+        concat(tag.table(**@props) do
+          # header
+          concat(
+            tag.thead(**@thead_html) do
+              concat(safe_join headers)
+            end
+          ) if headers?
+
+          # body
+          concat(
+            tag.tbody(**@tbody_html) do
+              if content.present?
+                content
+              else
+                concat(safe_join(rows)) if rows?
+              end
+            end
+          )
+
+          # Footer
+          concat(
+            tag.tfoot(**@tfoot_html) do
+              concat(footer)
+            end
+          ) if footer?
+        end)
+      end)
+    end
+  end
+end

data/app/components/fluxbit/table_group_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class Fluxbit::TableGroupComponent < Fluxbit::Component
+  include Fluxbit::Config::TableComponent
+
+  renders_many :cells, lambda { |*args, **props, &block|
+    cells_html_now = @cells_html.dup
+    add(class: props[:class], to: cells_html_now)
+    cells_html_now = props.merge cells_html_now
+    add(class: styles[:row][:cell][:selected], to: cells_html_now) if props.delete(:selected) || false
+    remove_class_from_props(cells_html_now)
+
+    content_tag(@as_cells, block.call, **cells_html_now)
+  }
+
+  def initialize(**props)
+    super
+    @props = props
+    @as = @props.delete(:as) || :tr
+    @cells_html = @props.delete(:cells_html) || { as: :td }
+
+    @as_cells = @cells_html.delete(:as) || :td
+  end
+
+  def call
+    tag.tr(safe_join(cells), **@props)
+  end
+end

data/app/components/fluxbit/theme_button_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+##
+# The `Fluxbit::ThemeButtonComponent` is a round button component that toggles between dark, light, and system themes.
+# It extends `Fluxbit::ButtonComponent` and automatically updates the theme when clicked.
+class Fluxbit::ThemeButtonComponent < Fluxbit::ButtonComponent
+  include Fluxbit::Config::ThemeButtonComponent
+
+  ##
+  # Initializes the theme button component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the theme button.
+  # @option props [Symbol, String] :color The color style of the button (default: :transparent)
+  # @option props [Symbol, String] :size The size of the button (default: 2)
+  # @option props [Boolean] :pill (true) Makes the button round
+  # @option props [Hash] **props Remaining options declared as HTML attributes.
+  #
+  # @return [Fluxbit::ThemeButtonComponent]
+  def initialize(**props)
+    # Set default values specific to theme button
+    props[:pill] = true unless props.key?(:pill)
+    props[:color] ||= :transparent
+    props[:size] ||= 2
+    props[:remove_dropdown_arrow] = true
+
+    # Add Stimulus controller
+    props["data-controller"] = [props["data-controller"], "fx-theme-button"].compact.join(" ")
+    props["data-action"] = [props["data-action"], "click->fx-theme-button#toggle"].compact.join(" ")
+
+    super(**props)
+  end
+
+  def call
+    concat(render_theme_button)
+    concat(render_popover_or_tooltip.to_s)
+  end
+
+  private
+
+  def render_theme_button
+    button_content = safe_join([
+      content_tag(:span, light_icon, class: "fx-theme-icon fx-theme-light hidden", "data-fx-theme-button-target": "lightIcon"),
+      content_tag(:span, dark_icon, class: "fx-theme-icon fx-theme-dark hidden", "data-fx-theme-button-target": "darkIcon"),
+      content_tag(:span, system_icon, class: "fx-theme-icon fx-theme-system hidden", "data-fx-theme-button-target": "systemIcon")
+    ])
+
+    content_tag(@as, button_content, @props)
+  end
+
+  def light_icon
+    # Sun icon for light mode
+    anyicon("heroicons_outline:sun", class: "size-5")
+  end
+
+  def dark_icon
+    # Moon icon for dark mode
+    anyicon("heroicons_outline:moon", class: "size-5")
+  end
+
+  def system_icon
+    # Computer/display icon for system mode
+    anyicon("heroicons_outline:computer-desktop", class: "size-5")
+  end
+end

data/app/components/fluxbit/timeline_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TimelineComponent` is a component for rendering customizable timelines.
+class Fluxbit::TimelineComponent < Fluxbit::Component
+  include Fluxbit::Config::TimelineComponent
+
+  # Slot for timeline items
+  renders_many :items, lambda { |**props|
+    Fluxbit::TimelineItemComponent.new(
+      variant: @variant,
+      **props
+    )
+  }
+
+  # Initializes the Timeline component with various customization options.
+  #
+  # @param [Hash] **props The properties to customize the timeline.
+  # @option props [Symbol] :variant (:default) The timeline variant (:default, :vertical, :stepper, :activity).
+  # @option props [Symbol] :position (:left) The position of timeline indicators (:left, :center, :right).
+  # @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::TimelineComponent]
+  def initialize(**props)
+    super
+    @props = props
+
+    @variant = options @props.delete(:variant), collection: styles[:variants].keys, default: @@variant
+    @position = options @props.delete(:position), collection: styles[:positions].keys, default: @@position
+
+    add class: [
+      styles[:base],
+      styles[:variants][@variant],
+      styles[:positions][@position]
+    ], to: @props
+
+    remove_class_from_props(@props)
+  end
+
+  def call
+    content_tag(@variant == :stepper ? "ol" : "ul", **@props) do
+      items_with_position.join.html_safe
+    end
+  end
+
+  private
+
+  def items_with_position
+    items.map.with_index do |item, index|
+      item.instance_variable_set(:@is_last, index == items.length - 1)
+      item
+    end
+  end
+
+
+  def timeline_classes
+    [
+      styles[:base],
+      styles[:variants][@variant],
+      styles[:positions][@position]
+    ].compact.join(" ")
+  end
+end