fluxbit_view_components 0.2.0 → 0.4.0

data/lib/fluxbit/config/card_component.rb

@@ -12,19 +12,30 @@ module Fluxbit::Config::CardComponent
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
   mattr_accessor :styles do
     {
-      base: "flex rounded-lg border border-gray-200 bg-white shadow-md dark:border-gray-700 dark:bg-gray-800",
-      children: "flex h-full flex-col justify-center gap-4 p-6",
-      horizontal: {
-        off: "flex-col",
-        on: "flex-col md:max-w-xl md:flex-row"
+      base:         "",
+      base_image_left: "flex flex-row",
+      border:       "border border-gray-200 dark:border-gray-700",
+      shadow:       "shadow-sm",
+      rounded:      "rounded-lg",
+      hoverable:    "transition-shadow hover:shadow-lg",
+      clickable: {
+        default: "cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700",
+        primary: "cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-800",
+        success: "cursor-pointer hover:bg-green-100 dark:hover:bg-green-800",
+        danger:  "cursor-pointer hover:bg-red-100 dark:hover:bg-red-800"
       },
-      href: "hover:bg-gray-100 dark:hover:bg-gray-700",
-      img: {
-        base: "",
-        horizontal: {
-          off: "rounded-t-lg",
-          on: "h-96 w-full rounded-t-lg object-cover md:h-auto md:w-48 md:rounded-none md:rounded-l-lg"
-        }
+      # "flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow-sm md:flex-row md:max-w-xl dark:border-gray-700"
+      header:       "px-4 py-2 font-semibold text-gray-900 dark:text-gray-100",
+      body:         "px-4 py-2 space-y-4",
+      footer:       "px-4 py-2 text-sm text-gray-500 dark:text-gray-400",
+      image_top:    "w-full",
+      image_left:   "object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-s-lg",
+      content_left: "px-4 py-2",
+      colors: {
+        default: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100",
+        primary: "bg-blue-50 text-blue-900 border-blue-200 dark:bg-blue-900 dark:text-white dark:border-blue-800",
+        success: "bg-green-50 text-green-900 border-green-200 dark:bg-green-900 dark:text-white dark:border-green-800",
+        danger:  "bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-white dark:border-red-800"
       }
     }
   end

data/lib/fluxbit/config/carousel_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::CarouselComponent
+  mattr_accessor :slide, default: true
+  mattr_accessor :slide_interval, default: 3000
+  mattr_accessor :indicators, default: true
+  mattr_accessor :controls, default: true
+
+  # rubocop:disable Layout/LineLength
+  mattr_accessor :styles do
+    {
+      base: "relative w-full",
+      slides_container: "relative h-56 overflow-hidden rounded-lg md:h-96",
+      slide: {
+        base: "duration-700 ease-in-out",
+        inactive: "hidden"
+      },
+      indicators: {
+        container: "absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse",
+        button: "w-3 h-3 rounded-full bg-white/50 hover:bg-white dark:bg-gray-800/50 dark:hover:bg-gray-800"
+      },
+      controls: {
+        button: "absolute top-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none",
+        previous: "start-0",
+        next: "end-0",
+        icon_wrapper: "inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none",
+        icon: "w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180",
+        sr_only: "sr-only"
+      }
+    }
+  end
+  # rubocop:enable Layout/LineLength
+end

data/lib/fluxbit/config/drawer_component.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::DrawerComponent
+  mattr_accessor :placement, default: :left
+  mattr_accessor :sizing, default: :sm
+  mattr_accessor :show_close_button, default: true
+  mattr_accessor :swipeable, default: false
+  mattr_accessor :shadow, default: true
+  mattr_accessor :backdrop, default: true
+  mattr_accessor :auto_show, default: false
+  mattr_accessor :body_scrolling, default: false
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      root: "fixed z-40 p-4",
+      color: "bg-white dark:bg-gray-800",
+      shadow: "shadow-lg dark:shadow-gray-900/50",
+      placements: {
+        left: "top-0 left-0 h-screen overflow-y-auto transition-transform -translate-x-full",
+        right: "top-0 right-0 h-screen overflow-y-auto transition-transform translate-x-full",
+        top: "top-0 left-0 right-0 w-full transition-transform -translate-y-full",
+        bottom: "bottom-0 left-0 right-0 w-full overflow-y-auto transition-transform transform-none"
+      },
+      sizes: {
+        horizontal: {
+          sm: "w-64",
+          md: "w-80",
+          lg: "w-96",
+          xl: "w-128",
+          full: "w-full"
+        },
+        vertical: {
+          sm: "h-64",
+          md: "h-80",
+          lg: "h-96",
+          xl: "h-128",
+          full: "h-full"
+        }
+      },
+      swipeable: {
+        default: "border-t border-gray-200 rounded-t-lg dark:border-gray-700 translate-y-full bottom-[-60px]",
+        swipe: "bottom-[60px]"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/dropdown_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::DropdownComponent
+  # mattr_accessor :placement, default: :left
+  mattr_accessor :sizing, default: 0
+  mattr_accessor :auto_divider, default: true
+  mattr_accessor :height, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "z-10 hidden bg-white rounded-lg shadow-sm dark:bg-gray-700",
+      ul: "py-1 text-sm text-gray-700 dark:text-gray-200",
+      auto_divider: "divide-y divide-gray-200 dark:divide-gray-600",
+      divider: "border-t border-gray-200 dark:border-gray-600",
+      icon: "mr-2 h-4 w-4",
+      sizes: [ "w-44", "w-60", "w-72", "w-80" ],
+      items: {
+        types: {
+          div: "py-2 overflow-y-auto text-gray-700 dark:text-gray-200",
+          button: "flex items-center justify-between w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white",
+          li: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600"
+        },
+        heights: [ "", "h-48", "h-60", "h-72", "h-80" ]
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/check_box_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::CheckBoxComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      checkbox: "rounded-sm",
+      base: "size-4 text-blue-600 bg-slate-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-slate-700 dark:border-slate-600",
+      label: {
+        with_helper: "font-medium text-slate-900 dark:text-slate-300",
+        base: "ml-2 text-sm font-medium text-slate-900 dark:text-slate-300"
+      },
+      input_div: "flex items-center h-5",
+      helper_div: "ml-2 text-sm",
+      no_helper_div: "flex items-center"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/dropzone_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::DropzoneComponent
+  mattr_accessor :icon, default: "heroicons_outline:cloud-arrow-up"
+  mattr_accessor :height, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_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",
+      icon: "size-10 mb-4 text-slate-500 dark:text-slate-400",
+      height: [ "", "h-32", "h-64", "h-96" ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/{helper_text_component.rb → help_text_component.rb}

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Fluxbit::Config::Form::HelperTextComponent
+module Fluxbit::Config::Form::HelpTextComponent
   mattr_accessor :color, default: :default
 
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
@@ -10,7 +10,7 @@ module Fluxbit::Config::Form::HelperTextComponent
       colors: {
         default: "text-gray-500 dark:text-gray-400",
         success: "text-green-600 dark:text-green-500",
-        failure: "text-red-600 dark:text-red-500",
+        danger: "text-red-600 dark:text-red-500",
         info: "text-cyan-600 dark:text-cyan-500",
         warning: "text-yellow-600 dark:text-yellow-500"
       }

data/lib/fluxbit/config/form/label_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::LabelComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :helper_popover_icon, default: "heroicons_solid:question-mark-circle"
+  mattr_accessor :helper_popover_icon_class, default: "size-4"
+  mattr_accessor :sizing, default: 1
+  mattr_accessor :helper_popover_placement, default: "right"
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "flex font-medium",
+      colors: {
+        default: "text-gray-900 dark:text-white",
+        success: "text-green-700 dark:text-green-500",
+        danger: "text-red-700 dark:text-red-500",
+        info: "text-cyan-500 dark:text-cyan-600",
+        warning: "text-yellow-500 dark:text-yellow-600"
+      },
+      sizes: [
+        "text-sm",
+        "text-md",
+        "text-lg"
+      ],
+      required: "text-red-500 px-1 required",
+      helper_popover: "px-2 text-slate-400"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/password_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::PasswordComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      strength_wrapper: "mt-2 space-y-2",
+      strength_bar_wrapper: "space-y-1",
+      strength_bar_label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+      strength_bar_container: "w-full bg-slate-200 rounded-full h-2 dark:bg-slate-700",
+      strength_bar: "h-2 rounded-full transition-all duration-300 bg-slate-300 dark:bg-slate-600",
+      checks_list: "space-y-1",
+      check_item: "flex items-center gap-2 text-sm text-slate-600 dark:text-slate-400",
+      check_icon: "flex-shrink-0 text-red-500 dark:text-red-400",
+      check_label: ""
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/radio_group_button_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::RadioGroupButtonComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :size, default: 1
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      group: "inline-flex rounded-md shadow-xs",
+      input: "sr-only peer",
+      label: {
+        base: "group flex items-center justify-center text-center font-medium relative focus:z-10 focus:outline-hidden cursor-pointer",
+        selected: "brightness-90 dark:brightness-75",
+        position: {
+          start: "rounded-r-none",
+          middle: "rounded-none",
+          end: "rounded-l-none"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/range_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::RangeComponent
+  mattr_accessor :vertical, default: false
+  mattr_accessor :sizing, default: 1
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "w-full bg-slate-200 rounded-lg appearance-none cursor-pointer dark:bg-slate-700",
+      sizes: [ "h-1 range-sm", "h-2", "h-3 range-lg" ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/text_field_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::TextFieldComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :sizing, default: 0
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      default: "mt-1 block w-full border disabled:cursor-not-allowed disabled:opacity-50 disabled:text-slate-900 disabled:dark:text-slate-400 disabled:bg-slate-100 disabled:dark:bg-slate-700",
+      text: {
+        default: "text-slate-900 dark:text-white",
+        success: "text-green-900",
+        danger: "text-red-900",
+        info: "text-cyan-900",
+        warning: "text-yellow-900"
+      },
+      ring: {
+        default: "focus:ring-blue-500 dark:focus:ring-blue-500",
+        success: "focus:ring-green-500",
+        danger: "focus:ring-red-500",
+        info: "focus:ring-cyan-500",
+        warning: "focus:ring-yellow-500"
+      },
+      bg: {
+        default: "bg-slate-50 dark:bg-slate-700",
+        success: "bg-green-50 dark:bg-green-100",
+        danger: "bg-red-50 dark:bg-red-100",
+        info: "bg-cyan-50 dark:bg-cyan-100",
+        warning: "bg-yellow-50 dark:bg-yellow-100"
+      },
+      placeholder: {
+        default: "dark:placeholder-slate-400",
+        success: "placeholder-green-700",
+        danger: "placeholder-red-700",
+        info: "placeholder-cyan-700",
+        warning: "placeholder-yellow-700"
+      },
+      border: {
+        default: "border-slate-300 focus:border-blue-500 dark:border-slate-600 dark:focus:border-blue-500",
+        success: "border-green-500 focus:border-green-500 dark:border-green-400",
+        danger: "border-red-500 focus:border-red-500 dark:border-red-400",
+        info: "border-cyan-500 focus:border-cyan-500 dark:border-cyan-400",
+        warning: "border-yellow-500 focus:border-yellow-500 dark:border-yellow-400"
+      },
+      shadow: "shadow-xs dark:shadow-xs-light",
+      icon: "pl-10",
+      right_icon: "pr-10",
+      sizing_md_addon: "p-2.5 rounded-none rounded-r-lg flex-1 min-w-0 text-sm",
+      sizes: [
+        "p-2.5 text-sm rounded-lg",
+        "p-4 sm:text-md rounded-lg",
+        "p-2 rounded-lg sm:text-xs"
+      ],
+      additional_icons: {
+        class: {
+          default: "mt-1 size-4 text-slate-500 dark:text-slate-400",
+          success: "mt-1 size-4 text-green-500 dark:text-green-400",
+          danger: "mt-1 size-4 text-red-500 dark:text-red-400",
+          info: "mt-1 size-4 text-cyan-500 dark:text-cyan-400",
+          warning: "mt-1 size-4 text-yellow-500 dark:text-yellow-400"
+        },
+        icon: "absolute inset-y-0 left-0 flex items-center pl-3",
+        right_icon: "absolute inset-y-0 right-0 flex items-center pr-3",
+        addon: {
+          default: "mt-1 inline-flex items-center px-3 text-sm text-slate-900 bg-slate-200 border border-r-0 border-slate-300 rounded-l-md dark:bg-slate-600 dark:text-slate-400 dark:border-slate-600",
+          success: "mt-1 inline-flex items-center px-3 text-sm text-green-900 bg-green-200 border border-r-0 border-green-300 rounded-l-md dark:bg-green-600 dark:text-green-400 dark:border-green-600",
+          danger: "mt-1 inline-flex items-center px-3 text-sm text-red-900 bg-red-200 border border-r-0 border-red-300 rounded-l-md dark:bg-red-600 dark:text-red-400 dark:border-red-600",
+          info: "mt-1 inline-flex items-center px-3 text-sm text-cyan-900 bg-cyan-200 border border-r-0 border-cyan-300 rounded-l-md dark:bg-cyan-600 dark:text-cyan-400 dark:border-cyan-600",
+          warning: "mt-1 inline-flex items-center px-3 text-sm text-yellow-900 bg-yellow-200 border border-r-0 border-yellow-300 rounded-l-md dark:bg-yellow-600 dark:text-yellow-400 dark:border-yellow-600"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/form/toggle_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::ToggleComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :unchecked_color, default: :default
+  mattr_accessor :button_color, default: :default
+  mattr_accessor :invert_label, default: false
+  mattr_accessor :sizing, default: 1
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      label: "text-sm rtl:text-right font-medium text-gray-700 dark:text-gray-200 flex items-center",
+      input: "size-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer",
+      toggle: {
+        base: "me-3 shrink-0 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:border after:rounded-full after:transition-all relative",
+        checked: {
+          default: "peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600",
+          success: "peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600",
+          danger: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600",
+          info: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600",
+          warning: "peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-600",
+          dark: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-600",
+          light: "peer-focus:ring-gray-300 dark:peer-focus:ring-gray-100 peer-checked:bg-gray-100",
+          teal: "peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600",
+          purple: "peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600",
+          cyan: "peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600",
+          lime: "peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-600",
+          indigo: "peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600",
+          pink: "peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600"
+        },
+        unchecked: {
+          default: "bg-slate-200 dark:bg-slate-700 dark:border-slate-600 after:border-slate-300",
+          blue: "bg-blue-600 dark:bg-blue-500 dark:border-blue-500 after:border-blue-600",
+          success: "bg-green-600 dark:bg-green-500 dark:border-green-500 after:border-green-600",
+          danger: "bg-red-600 dark:bg-red-500 dark:border-red-500 after:border-red-600",
+          info: "bg-cyan-600 dark:bg-cyan-500 dark:border-cyan-500 after:border-cyan-600",
+          warning: "bg-yellow-600 dark:bg-yellow-500 dark:border-yellow-500 after:border-yellow-600",
+          teal: "bg-teal-600 dark:bg-teal-500 dark:border-teal-500 after:border-teal-600",
+          purple: "bg-purple-600 dark:bg-purple-500 dark:border-purple-500 after:border-purple-600",
+          cyan: "bg-cyan-600 dark:bg-cyan-500 dark:border-cyan-500 after:border-cyan-600",
+          lime: "bg-lime-600 dark:bg-lime-500 dark:border-lime-500 after:border-lime-600",
+          indigo: "bg-indigo-600 dark:bg-indigo-500 dark:border-indigo-500 after:border-indigo-600",
+          pink: "bg-pink-600 dark:bg-pink-500 dark:border-pink-500 after:border-pink-600",
+          dark: "bg-gray-600 dark:bg-gray-800 dark:border-gray-600 after:border-gray-300",
+          light: "bg-gray-50 dark:bg-gray-300 dark:border-gray-200 after:border-gray-50",
+          light_success: "bg-green-200 dark:bg-green-700 dark:border-green-600 after:border-green-300",
+          light_danger: "bg-red-200 dark:bg-red-700 dark:border-red-600 after:border-red-300",
+          light_info: "bg-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 after:border-cyan-300",
+          light_warning: "bg-yellow-200 dark:bg-yellow-700 dark:border-yellow-600 after:border-yellow-300",
+          light_teal: "bg-teal-200 dark:bg-teal-700 dark:border-teal-600 after:border-teal-300",
+          light_purple: "bg-purple-200 dark:bg-purple-700 dark:border-purple-600 after:border-purple-300",
+          light_cyan: "bg-cyan-200 dark:bg-cyan-700 dark:border-cyan-600 after:border-cyan-300",
+          light_lime: "bg-lime-200 dark:bg-lime-700 dark:border-lime-600 after:border-lime-300",
+          light_indigo: "bg-indigo-200 dark:bg-indigo-700 dark:border-indigo-600 after:border-indigo-300",
+          light_pink: "bg-pink-200 dark:bg-pink-700 dark:border-pink-600 after:border-pink-300"
+        },
+        button: {
+          default: "after:bg-white",
+          success: "after:bg-green-500",
+          danger: "after:bg-red-500",
+          info: "after:bg-cyan-500"
+
+        },
+        sizes: [
+          "w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4",
+          "w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5",
+          "w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6"
+        ],
+        active: {
+          on: "cursor-pointer",
+          off: "cursor-not-allowed opacity-50"
+        },
+        invert_label: "ms-3"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

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