fluxbit_view_components 0.3.0 → 0.4.0

data/lib/fluxbit/config/link_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::LinkComponent
+  mattr_accessor :color, default: :primary
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "font-medium text-blue-600 dark:text-blue-500 hover:underline",
+      colors: {
+        default: "text-gray-900 dark:text-white",
+        primary: "text-blue-600 dark:text-blue-500",
+        secondary: "text-gray-500 dark:text-gray-400",
+        success: "text-green-600 dark:text-green-500",
+        danger: "text-red-600 dark:text-red-500",
+        warning: "text-yellow-600 dark:text-yellow-500",
+        info: "text-blue-400 dark:text-blue-300",
+        light: "text-gray-300 dark:text-gray-200",
+        dark: "text-gray-800 dark:text-gray-700"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/modal_component.rb

@@ -53,7 +53,7 @@ module Fluxbit::Config::ModalComponent
         no_title: "-mt-4"
       },
       header: {
-        base: "flex items-start justify-between rounded-t border-b p-5 dark:border-gray-600",
+        base: "flex items-start justify-between rounded-t border-b p-5 border-gray-200 dark:border-gray-600",
         flat: "border-b-0 p-2",
         title: "text-xl font-medium text-gray-900 dark:text-white",
         close: {

data/lib/fluxbit/config/pagination_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::PaginationComponent
+  mattr_accessor :show_first_last, default: false
+  mattr_accessor :show_prev_next, default: true
+  mattr_accessor :show_pages, default: true
+  mattr_accessor :show_icons, default: true
+  mattr_accessor :show_texts, default: false
+  mattr_accessor :sizing, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      root: "inline-flex -space-x-px border-e-0 rounded-s-lg",
+      page_link: "flex items-center justify-center px-3 h-8 leading-tight text-slate-500 bg-white border border-slate-300 hover:bg-slate-100 hover:text-slate-700 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white",
+      previous: "ms-0 border-e-0 rounded-s-lg",
+      next: "rounded-e-lg",
+      disabled: "px-3 py-1 text-slate-400 cursor-default",
+      current: "flex items-center justify-center px-3 h-8 leading-tight border border-slate-300 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:bg-slate-700 dark:border-slate-700 dark:text-white",
+      text_with_icon_prev: "ms-2",
+      text_with_icon_next: "me-2",
+      only_text: "",
+      only_icon: "sr-only",
+      sizes: [
+        { root: "text-sm", page_link: "px-3 h-8" },
+        { root: "text-base h-10", page_link: "px-4 h-10" }
+      ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/popover_component.rb

@@ -3,7 +3,7 @@
 module Fluxbit::Config::PopoverComponent
   mattr_accessor :has_arrow, default: true
   mattr_accessor :image_position, default: :right
-  mattr_accessor :image_props, default: {}
+  mattr_accessor :image_html, default: {}
   mattr_accessor :size, default: 2
 
   # rubocop: disable Layout/LineLength, Metrics/BlockLength

data/lib/fluxbit/config/progress_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::ProgressComponent
+  # Default values
+  mattr_accessor :progress, default: 0
+  mattr_accessor :color, default: :default
+  mattr_accessor :size, default: 1
+  mattr_accessor :text_label, default: nil
+  mattr_accessor :label_progress, default: false
+  mattr_accessor :label_text, default: false
+  mattr_accessor :progress_label_position, default: :inside
+  mattr_accessor :text_label_position, default: :outside
+  mattr_accessor :label_html, default: {}
+  mattr_accessor :stimulus, default: false
+
+  # Styling system
+  mattr_accessor :styles do
+    {
+      base: "w-full bg-gray-200 rounded-full dark:bg-gray-700",
+      bar: {
+        base: "h-full font-medium text-center leading-none rounded-full transition-all duration-300 ease-in-out flex items-center justify-center",
+        colors: {
+          default: "bg-blue-600 text-blue-100",
+          dark: "bg-gray-600 text-gray-100",
+          blue: "bg-blue-600 text-blue-100",
+          red: "bg-red-600 text-red-100",
+          green: "bg-green-600 text-green-100",
+          yellow: "bg-yellow-400 text-yellow-800",
+          indigo: "bg-indigo-600 text-indigo-100",
+          purple: "bg-purple-600 text-purple-100",
+          cyan: "bg-cyan-600 text-cyan-100",
+          gray: "bg-gray-600 text-gray-100",
+          lime: "bg-lime-600 text-lime-100",
+          pink: "bg-pink-600 text-pink-100",
+          teal: "bg-teal-600 text-teal-100"
+        },
+        text_sizes: [
+          "text-xs px-1",  # size 0 - very small text, minimal padding
+          "text-xs px-1",  # size 1 - small text, minimal padding
+          "text-xs px-2",  # size 2 - normal text, normal padding
+          "text-sm px-2"   # size 3 - larger text, normal padding
+        ]
+      },
+      sizes: [
+        "h-1.5",  # size 0 - sm
+        "h-2.5",  # size 1 - md (default)
+        "h-4",    # size 2 - lg
+        "h-6"     # size 3 - xl
+      ],
+      labels: {
+        outside: {
+          base: "flex justify-between items-center mb-1",
+          text: "text-base font-medium text-blue-700 dark:text-white",
+          progress: "text-sm font-medium text-blue-700 dark:text-white"
+        },
+        inside: {
+          text: "text-xs font-medium text-center",
+          progress: "text-xs font-medium text-center"
+        }
+      }
+    }
+  end
+end

data/lib/fluxbit/config/skeleton_component.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::SkeletonComponent
+  mattr_accessor :variant, default: :default
+  mattr_accessor :animation, default: true
+  mattr_accessor :rows, default: 3
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "animate-pulse",
+      container: "w-full",
+      screen_reader: "sr-only",
+      text: {
+        line: "h-2.5 bg-gray-200 rounded-full dark:bg-gray-700",
+        small: "h-2 bg-gray-200 rounded-full dark:bg-gray-700",
+        large: "h-3 bg-gray-200 rounded-full dark:bg-gray-700"
+      },
+      widths: {
+        first_line: "w-48",
+        last_line: "w-32",
+        full: "w-full",
+        card_header: "w-48",
+        widget_title: "w-48",
+        list_name: "w-24",
+        list_content: "w-32",
+        testimonial_last: "w-24",
+        testimonial_name: "w-32",
+        testimonial_title: "w-24"
+      },
+      avatar: {
+        small: "w-8 h-8 bg-gray-200 rounded-full dark:bg-gray-700",
+        medium: "w-10 h-10 bg-gray-200 rounded-full dark:bg-gray-700",
+        large: "w-14 h-14 bg-gray-200 rounded-full dark:bg-gray-700"
+      },
+      image: {
+        small: "h-32 bg-gray-300 rounded dark:bg-gray-700",
+        medium: "h-48 bg-gray-300 rounded dark:bg-gray-700",
+        large: "h-64 bg-gray-300 rounded dark:bg-gray-700",
+        container: "flex items-center justify-center w-full",
+        icon: "w-8 h-8 text-gray-200 dark:text-gray-600"
+      },
+      video: {
+        small: "h-32 bg-gray-300 rounded dark:bg-gray-700",
+        medium: "h-48 bg-gray-300 rounded dark:bg-gray-700",
+        large: "h-64 bg-gray-300 rounded dark:bg-gray-700",
+        container: "flex items-center justify-center w-full",
+        icon: "w-10 h-10 text-gray-200 dark:text-gray-600"
+      },
+      button: "h-8 bg-gray-200 rounded dark:bg-gray-700 w-20",
+      card: {
+        container: "p-4 border border-gray-200 rounded shadow dark:border-gray-700",
+        header: "h-4 bg-gray-200 rounded-full dark:bg-gray-700",
+        body: "h-2 bg-gray-200 rounded-full dark:bg-gray-700"
+      },
+      widget: {
+        container: "p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700",
+        title: "h-4 bg-gray-200 rounded-full dark:bg-gray-700 mb-4",
+        content: "h-2 bg-gray-200 rounded-full dark:bg-gray-700"
+      },
+      list: {
+        container: "space-y-3",
+        item: "flex items-center space-x-4",
+        avatar: "w-10 h-10 bg-gray-200 rounded-full dark:bg-gray-700",
+        content: "flex-1 space-y-2"
+      },
+      testimonial: {
+        container: "p-4",
+        quote: "h-2 bg-gray-200 rounded-full dark:bg-gray-700",
+        author: "flex items-center mt-4 space-x-3",
+        avatar: "w-8 h-8 bg-gray-200 rounded-full dark:bg-gray-700"
+      },
+      spacing: {
+        none: "",
+        small: "mb-2.5",
+        medium: "mb-4",
+        large: "mb-6"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/speed_dial_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::SpeedDialComponent
+  mattr_accessor :position, default: :bottom_right
+  mattr_accessor :square, default: false
+  mattr_accessor :text_outside, default: false
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "fixed z-50 group",
+      positions: {
+        top_left: "top-6 start-6",
+        top_right: "top-6 end-6",
+        bottom_left: "bottom-6 start-6",
+        bottom_right: "bottom-6 end-6"
+      },
+      menu: {
+        base: "flex flex-col items-center space-y-2",
+        hidden: "hidden",
+        spacing: {
+          top: "mt-4",
+          bottom: "mb-4"
+        }
+      },
+      trigger: {
+        base: "flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 transition-all duration-200",
+        shapes: {
+          rounded: "rounded-full w-14 h-14",
+          square: "rounded-lg w-14 h-14"
+        },
+        icon: "w-5 h-5 transition-transform group-hover:rotate-45"
+      },
+      action: {
+        base: "flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400 transition-all duration-200",
+        shapes: {
+          rounded: "rounded-full",
+          square: "rounded-lg"
+        },
+        icon: "w-5 h-5",
+        text: {
+          base: "relative",
+          outside: "block mb-px text-sm font-medium text-gray-900 dark:text-white"
+        }
+      },
+      screen_reader: "sr-only"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/spinner_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::SpinnerComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :size, default: 1
+  mattr_accessor :label, default: "Loading..."
+
+  mattr_accessor :styles do
+    {
+      base: "animate-spin",
+      sizes: [
+        "w-4 h-4",      # 0 - xs
+        "w-6 h-6",      # 1 - sm (default)
+        "w-8 h-8",      # 2 - md
+        "w-10 h-10",    # 3 - lg
+        "w-12 h-12"     # 4 - xl
+      ],
+      colors: {
+        default: "text-gray-200 fill-blue-600",
+        info: "text-gray-200 fill-cyan-600",
+        success: "text-gray-200 fill-green-500",
+        failure: "text-gray-200 fill-red-600",
+        warning: "text-gray-200 fill-yellow-400",
+        pink: "text-gray-200 fill-pink-600",
+        purple: "text-gray-200 fill-purple-600"
+      },
+      screen_reader: "sr-only"
+    }
+  end
+end

data/lib/fluxbit/config/spinner_percent_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::SpinnerPercentComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :size, default: 2
+  mattr_accessor :percent, default: 10
+  mattr_accessor :label, default: "Loading..."
+  mattr_accessor :show_percent, default: true
+  mattr_accessor :text, default: nil
+  mattr_accessor :animate, default: false
+  mattr_accessor :speed, default: :normal
+
+  mattr_accessor :styles do
+    {
+      base: "relative",
+      sizes: [
+        "w-12 h-12",    # 0 - xxs
+        "w-16 h-16",    # 1 - xs
+        "w-20 h-20",    # 2 - sm (default)
+        "w-24 h-24",    # 3 - md
+        "w-32 h-32",    # 4 - lg
+        "w-40 h-40"     # 5 - xl
+      ],
+      colors: {
+        default: "text-gray-200 stroke-blue-600",
+        info: "text-gray-200 stroke-cyan-600",
+        success: "text-gray-200 stroke-green-500",
+        failure: "text-gray-200 stroke-red-600",
+        warning: "text-gray-200 stroke-yellow-400",
+        pink: "text-gray-200 stroke-pink-600",
+        purple: "text-gray-200 stroke-purple-600"
+      },
+      screen_reader: "sr-only",
+      text_colors: {
+        default: "text-blue-600",
+        info: "text-cyan-600",
+        success: "text-green-500",
+        failure: "text-red-600",
+        warning: "text-yellow-400",
+        pink: "text-pink-600",
+        purple: "text-purple-600"
+      },
+      animation: "animate-spin",
+      speeds: {
+        slow: "animate-spin duration-[3s]",      # 3 seconds per rotation
+        normal: "animate-spin duration-1000",    # 1 second per rotation (default)
+        fast: "animate-spin duration-500",       # 0.5 seconds per rotation
+        very_fast: "animate-spin duration-300"   # 0.3 seconds per rotation
+      },
+      svg: {
+        transform: "transform -rotate-90"
+      },
+      percentage_text: {
+        position: "absolute inset-0 flex items-center justify-center text-sm font-semibold"
+      },
+      progress_circle: {
+        transition: "transition-all duration-300 ease-in-out"
+      }
+    }
+  end
+end

data/lib/fluxbit/config/stepper_component.rb

@@ -0,0 +1,299 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::StepperComponent
+  mattr_accessor :orientation, default: :horizontal
+  mattr_accessor :variant, default: :default
+  mattr_accessor :color, default: :blue
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: {
+        horizontal: "flex items-center w-full",
+        vertical: "flex flex-col"
+      },
+      list: {
+        default: {
+          horizontal: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base",
+          vertical: "text-sm font-medium text-gray-500 dark:text-gray-400"
+        },
+        progress: {
+          horizontal: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base",
+          vertical: "text-sm font-medium text-gray-500 dark:text-gray-400"
+        },
+        detailed: {
+          horizontal: "flex items-center w-full text-sm font-medium text-center text-gray-500 dark:text-gray-400 sm:text-base",
+          vertical: "space-y-4"
+        }
+      },
+      item: {
+        default: {
+          horizontal: "flex md:w-full items-center",
+          vertical: "mb-4"
+        },
+        progress: {
+          horizontal: "flex md:w-full items-center",
+          vertical: "mb-4"
+        },
+        detailed: {
+          horizontal: "flex md:w-full items-center",
+          vertical: "flex items-start p-4 border border-gray-200 rounded-lg dark:border-gray-700 relative"
+        }
+      },
+      step: {
+        default: {
+          base: "flex items-center justify-center w-10 h-10 bg-gray-100 rounded-full lg:h-12 lg:w-12 dark:bg-gray-700 shrink-0",
+          completed: "flex items-center justify-center w-10 h-10 rounded-full lg:h-12 lg:w-12 dark:bg-green-800 bg-green-100 shrink-0",
+          active: {
+            blue: "flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full lg:h-12 lg:w-12 dark:bg-blue-800 shrink-0",
+            green: "flex items-center justify-center w-10 h-10 bg-green-100 rounded-full lg:h-12 lg:w-12 dark:bg-green-800 shrink-0",
+            red: "flex items-center justify-center w-10 h-10 bg-red-100 rounded-full lg:h-12 lg:w-12 dark:bg-red-800 shrink-0",
+            yellow: "flex items-center justify-center w-10 h-10 bg-yellow-100 rounded-full lg:h-12 lg:w-12 dark:bg-yellow-800 shrink-0",
+            indigo: "flex items-center justify-center w-10 h-10 bg-indigo-100 rounded-full lg:h-12 lg:w-12 dark:bg-indigo-800 shrink-0",
+            purple: "flex items-center justify-center w-10 h-10 bg-purple-100 rounded-full lg:h-12 lg:w-12 dark:bg-purple-800 shrink-0"
+          }
+        },
+        progress: {
+          base: "flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full dark:bg-gray-700 shrink-0",
+          completed: "flex items-center justify-center w-8 h-8 rounded-full dark:bg-green-600 bg-green-600 shrink-0",
+          active: {
+            blue: "flex items-center justify-center w-8 h-8 bg-blue-600 rounded-full dark:bg-blue-600 shrink-0",
+            green: "flex items-center justify-center w-8 h-8 bg-green-600 rounded-full dark:bg-green-600 shrink-0",
+            red: "flex items-center justify-center w-8 h-8 bg-red-600 rounded-full dark:bg-red-600 shrink-0",
+            yellow: "flex items-center justify-center w-8 h-8 bg-yellow-600 rounded-full dark:bg-yellow-600 shrink-0",
+            indigo: "flex items-center justify-center w-8 h-8 bg-indigo-600 rounded-full dark:bg-indigo-600 shrink-0",
+            purple: "flex items-center justify-center w-8 h-8 bg-purple-600 rounded-full dark:bg-purple-600 shrink-0"
+          }
+        },
+        detailed: {
+          base: "flex items-center justify-center w-12 h-12 bg-white border-2 border-gray-300 rounded-full dark:bg-gray-800 dark:border-gray-600 shrink-0",
+          completed: "flex items-center justify-center w-12 h-12 bg-green-600 border-2 border-green-600 rounded-full dark:bg-green-600 dark:border-green-600 shrink-0",
+          active: {
+            blue: "flex items-center justify-center w-12 h-12 bg-blue-600 border-2 border-blue-600 rounded-full dark:bg-blue-600 dark:border-blue-600 shrink-0",
+            green: "flex items-center justify-center w-12 h-12 bg-green-600 border-2 border-green-600 rounded-full dark:bg-green-600 dark:border-green-600 shrink-0",
+            red: "flex items-center justify-center w-12 h-12 bg-red-600 border-2 border-red-600 rounded-full dark:bg-red-600 dark:border-red-600 shrink-0",
+            yellow: "flex items-center justify-center w-12 h-12 bg-yellow-600 border-2 border-yellow-600 rounded-full dark:bg-yellow-600 dark:border-yellow-600 shrink-0",
+            indigo: "flex items-center justify-center w-12 h-12 bg-indigo-600 border-2 border-indigo-600 rounded-full dark:bg-indigo-600 dark:border-indigo-600 shrink-0",
+            purple: "flex items-center justify-center w-12 h-12 bg-purple-600 border-2 border-purple-600 rounded-full dark:bg-purple-600 dark:border-purple-600 shrink-0"
+          }
+        }
+      },
+      step_number: {
+        default: {
+          base: "text-gray-500 dark:text-gray-100",
+          completed: "text-green-600 dark:text-green-300",
+          active: {
+            blue: "text-blue-600 dark:text-blue-300",
+            green: "text-green-600 dark:text-green-300",
+            red: "text-red-600 dark:text-red-300",
+            yellow: "text-yellow-600 dark:text-yellow-300",
+            indigo: "text-indigo-600 dark:text-indigo-300",
+            purple: "text-purple-600 dark:text-purple-300"
+          }
+        },
+        progress: {
+          base: "hidden",
+          completed: "text-white text-xs font-bold",
+          active: {
+            blue: "text-white text-xs font-bold",
+            green: "text-white text-xs font-bold",
+            red: "text-white text-xs font-bold",
+            yellow: "text-white text-xs font-bold",
+            indigo: "text-white text-xs font-bold",
+            purple: "text-white text-xs font-bold"
+          }
+        },
+        detailed: {
+          base: "text-gray-600 dark:text-gray-300 font-semibold",
+          completed: "text-white font-semibold",
+          active: {
+            blue: "text-white font-semibold",
+            green: "text-white font-semibold",
+            red: "text-white font-semibold",
+            yellow: "text-white font-semibold",
+            indigo: "text-white font-semibold",
+            purple: "text-white font-semibold"
+          }
+        }
+      },
+      step_icon: {
+        default: {
+          completed: "w-3.5 h-3.5 text-green-600 dark:text-green-300",
+          base: "w-4 h-4 text-gray-500 dark:text-gray-100"
+        },
+        progress: {
+          completed: "w-3 h-3 text-white",
+          base: "w-3 h-3 text-gray-500 dark:text-gray-100"
+        },
+        detailed: {
+          completed: "w-4 h-4 text-white",
+          base: "w-4 h-4 text-gray-600 dark:text-gray-300"
+        }
+      },
+      content: {
+        default: {
+          horizontal: "sm:ml-4 ml-2 mt-0",
+          vertical: "ml-4 mt-0"
+        },
+        progress: {
+          horizontal: "sm:ml-4 ml-2 mt-0",
+          vertical: "ml-4 mt-0"
+        },
+        detailed: {
+          horizontal: "sm:ml-6 ml-4 mt-0",
+          vertical: "ml-6 mt-0"
+        }
+      },
+      title: {
+        base: "text-gray-900 dark:text-white",
+        completed: "text-green-600 dark:text-green-300",
+        active: {
+          blue: "text-blue-600 dark:text-blue-300",
+          green: "text-green-600 dark:text-green-300",
+          red: "text-red-600 dark:text-red-300",
+          yellow: "text-yellow-600 dark:text-yellow-300",
+          indigo: "text-indigo-600 dark:text-indigo-300",
+          purple: "text-purple-600 dark:text-purple-300"
+        }
+      },
+      description: "text-sm text-gray-500 dark:text-gray-400",
+      connector: {
+        default: {
+          horizontal: "hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700",
+          vertical: "w-0.5 h-6 bg-gray-200 dark:bg-gray-700 mx-auto"
+        },
+        progress: {
+          horizontal: "hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700",
+          vertical: "w-0.5 h-6 bg-gray-200 dark:bg-gray-700 mx-auto"
+        },
+        detailed: {
+          horizontal: "hidden sm:flex w-full bg-gray-200 h-0.5 dark:bg-gray-700",
+          vertical: "w-0.5 h-6 bg-gray-200 dark:bg-gray-700 mx-auto"
+        },
+        completed: {
+          default: {
+            horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+            vertical: "w-0.5 h-6 bg-green-200 dark:bg-green-700 mx-auto"
+          },
+          progress: {
+            horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+            vertical: "w-0.5 h-6 bg-green-200 dark:bg-green-700 mx-auto"
+          },
+          detailed: {
+            horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+            vertical: "w-0.5 h-6 bg-green-200 dark:bg-green-700 mx-auto"
+          }
+        },
+        active: {
+          blue: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-blue-200 h-0.5 dark:bg-blue-700",
+              vertical: "w-0.5 h-6 bg-blue-200 dark:bg-blue-700 mx-auto"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-blue-200 h-0.5 dark:bg-blue-700",
+              vertical: "w-0.5 h-6 bg-blue-200 dark:bg-blue-700"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-blue-200 h-0.5 dark:bg-blue-700",
+              vertical: "w-0.5 h-6 bg-blue-200 dark:bg-blue-700"
+            }
+          },
+          green: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+              vertical: "ml-5 w-0.5 h-6 bg-green-200 dark:bg-green-700"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+              vertical: "w-0.5 h-6 bg-green-200 dark:bg-green-700 mx-auto"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-green-200 h-0.5 dark:bg-green-700",
+              vertical: "w-0.5 h-6 bg-green-200 dark:bg-green-700 mx-auto"
+            }
+          },
+          red: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-red-200 h-0.5 dark:bg-red-700",
+              vertical: "ml-5 w-0.5 h-6 bg-red-200 dark:bg-red-700"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-red-200 h-0.5 dark:bg-red-700",
+              vertical: "w-0.5 h-6 bg-red-200 dark:bg-red-700 mx-auto"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-red-200 h-0.5 dark:bg-red-700",
+              vertical: "w-0.5 h-6 bg-red-200 dark:bg-red-700 mx-auto"
+            }
+          },
+          yellow: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-yellow-200 h-0.5 dark:bg-yellow-700",
+              vertical: "ml-5 w-0.5 h-6 bg-yellow-200 dark:bg-yellow-700"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-yellow-200 h-0.5 dark:bg-yellow-700",
+              vertical: "w-0.5 h-6 bg-yellow-200 dark:bg-yellow-700 mx-auto"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-yellow-200 h-0.5 dark:bg-yellow-700",
+              vertical: "w-0.5 h-6 bg-yellow-200 dark:bg-yellow-700 mx-auto"
+            }
+          },
+          indigo: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-indigo-700",
+              vertical: "ml-5 w-0.5 h-6 bg-indigo-200 dark:bg-indigo-700"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-indigo-700",
+              vertical: "w-0.5 h-6 bg-indigo-200 dark:bg-indigo-700 mx-auto"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-indigo-700",
+              vertical: "w-0.5 h-6 bg-indigo-200 dark:bg-indigo-700 mx-auto"
+            }
+          },
+          purple: {
+            default: {
+              horizontal: "hidden sm:flex w-full bg-purple-200 h-0.5 dark:bg-purple-700",
+              vertical: "ml-5 w-0.5 h-6 bg-purple-200 dark:bg-purple-700"
+            },
+            progress: {
+              horizontal: "hidden sm:flex w-full bg-purple-200 h-0.5 dark:bg-purple-700",
+              vertical: "w-0.5 h-6 bg-purple-200 dark:bg-purple-700 mx-auto"
+            },
+            detailed: {
+              horizontal: "hidden sm:flex w-full bg-purple-200 h-0.5 dark:bg-purple-700",
+              vertical: "w-0.5 h-6 bg-purple-200 dark:bg-purple-700 mx-auto"
+            }
+          }
+        }
+      },
+      layout: {
+        wrapper: "relative",
+        flex_center: "flex items-center"
+      },
+      vertical_connector: {
+        base: "absolute top-full w-0.5 h-6",
+        positions: {
+          progress: "left-4",    # w-8 circles
+          detailed: "left-6",    # w-12 circles
+          default: "left-5"      # w-10 circles
+        },
+        colors: {
+          completed: "bg-green-200 dark:bg-green-700",
+          default: "bg-gray-200 dark:bg-gray-700",
+          blue: "bg-blue-200 dark:bg-blue-700",
+          green: "bg-green-200 dark:bg-green-700",
+          red: "bg-red-200 dark:bg-red-700",
+          yellow: "bg-yellow-200 dark:bg-yellow-700",
+          indigo: "bg-indigo-200 dark:bg-indigo-700",
+          purple: "bg-purple-200 dark:bg-purple-700"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end