fluxbit_view_components 0.2.0 → 0.4.0

data/app/helpers/fluxbit/form_builder.rb

@@ -0,0 +1,136 @@
+module Fluxbit
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    include ActionView::Helpers::OutputSafetyHelper
+
+    attr_reader :template
+
+    delegate :render, :pluralize, to: :template
+
+    def errors_summary(within: :container)
+      return if object.blank?
+      return unless object.errors.any?
+
+      title = I18n.t(
+        "polaris.form_builder.errors_summary",
+        count: object.errors.count,
+        model: object.class.model_name.human.downcase
+      )
+
+      render Fluxbit::BannerComponent.new(
+        title: title,
+        status: :critical,
+        within: within,
+        data: { errors_summary: true }
+      ) do |banner|
+        parts = []
+
+        parts << render(Fluxbit::ListComponent.new) do |list|
+          object.errors.full_messages.each do |error|
+            list.with_item { template.sanitize(error.to_s, tags: [], attributes: []) }
+          end
+        end
+
+        parts << template.capture { yield(banner) } if block_given?
+
+        template.safe_join(parts)
+      end
+    end
+
+    def error_for(method)
+      return if object.blank?
+      return unless object.errors.key?(method)
+
+      raw object.errors.full_messages_for(method)&.first
+    end
+
+    def fluxbit_inline_error_for(method, **options, &block)
+      error_message = error_for(method)
+      return unless error_message
+
+      render(Fluxbit::InlineErrorComponent.new(**options, &block)) do
+        error_message
+      end
+    end
+
+    Fluxbit::Form::TextFieldComponent::TYPE_OPTIONS.each do |type|
+      define_method(type.in?([ :text_area, :textarea ]) ? "fx_#{type}" : "fx_#{type}_field") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        render Fluxbit::Form::TextFieldComponent.new(form: self, type: type, attribute: method, **options), &block
+      end
+    end
+
+    Fluxbit::Form::CheckBoxComponent::TYPE_OPTIONS.each do |type|
+      define_method("fx_#{type}") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        render Fluxbit::Form::CheckBoxComponent.new(form: self, type: type, attribute: method, **options), &block
+      end
+    end
+
+    [ :range, :toggle, :upload_image, :dropzone, :password ].each do |component|
+      define_method("fx_#{component}") do |method, **options, &block|
+        options[:error] ||= error_for(method)
+        options[:error] = !!options[:error] if options[:error_hidden] && options[:error]
+        klass = "Fluxbit::Form::#{component.to_s.camelize}Component".constantize
+        render klass.new(form: self, attribute: method, **options), &block
+      end
+    end
+
+    def fx_radio_group_button(method, **options, &block)
+      options[:name] ||= "#{@object_name}[#{method}]"
+      render Fluxbit::Form::RadioGroupButtonComponent.new(**options), &block
+    end
+
+    # Mimics Rails' form.select signature:
+    # select(method, choices = nil, options = {}, html_options = {}, &block)
+    #
+    # @param method [Symbol] The attribute name
+    # @param choices [Array, Hash, String, nil] Options for the select (raw data or pre-formatted HTML)
+    # @param options [Hash] Options like prompt, include_blank, selected, disabled
+    # @param html_options [Hash] HTML attributes for the select tag
+    # @param block [Proc] Optional block for custom options
+    #
+    # @example Basic usage
+    #   form.fx_select :role, ["Admin", "User", "Guest"]
+    #
+    # @example With options
+    #   form.fx_select :country, countries, { prompt: "Select a country" }, { class: "custom-class" }
+    #
+    # @example With pre-formatted options
+    #   form.fx_select :status, options_for_select(statuses, selected: "active")
+    def fx_select(method, choices = nil, options = {}, html_options = {}, &block)
+      # Handle Rails-style signature
+      all_options = html_options.merge(options)
+
+      # Set the choices/options
+      all_options[:options] = choices if choices.present?
+
+      # Add error handling
+      all_options[:error] ||= error_for(method)
+      all_options[:error] = !!all_options[:error] if all_options[:error_hidden] && all_options[:error]
+
+      # Set selected value from object if not explicitly provided
+      value = object&.public_send(method)
+      all_options[:selected] ||= value if value.present?
+
+      render Fluxbit::Form::SelectComponent.new(form: self, attribute: method, **all_options, &block)
+    end
+
+    def fx_submit(content = nil, **options, &block)
+      options[:form] = self
+      options[:content] = content if content.present?
+      options[:color] ||= :primary
+      options[:size] ||= 2
+      options[:disabled] = true if object&.persisted? && !object.valid?
+
+      if block_given?
+        render Fluxbit::ButtonComponent.new(**options) do |*args|
+          yield(*args)
+        end
+      else
+        render Fluxbit::ButtonComponent.new(**options)
+      end
+    end
+  end
+end

data/app/helpers/fluxbit/view_helper.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ViewHelper
+    def fx_body_class
+      "h-full bg-slate-100 dark:bg-slate-900 dark:text-white"
+    end
+
+    def fx_sort_field(field, url, label = nil)
+      order = (request.query_parameters[:order] || "").rpartition("_")
+
+      order_direction = "asc"
+      if order.first == field.to_s
+        order_direction = order.last == "asc" ? "desc" : "asc"
+      end
+
+      link_to public_send(url, request.query_parameters.merge(order: "#{field}_#{order_direction}")), class: "order-#{order_direction} flex" do
+        label_text = label || field.to_s.titlecase
+        icon = if order.first == field.to_s
+          order_direction == "asc" ? fx_sort_up : fx_sort_down
+        else
+          fx_sort_up_down
+        end
+
+        safe_join([ h(label_text), icon ], " ")
+      end
+    end
+
+    def fx_sort_up_down
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Zm-3.75 9.75a.75.75 0 0 1 1.06 0L12 17.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-3.75 3.75a.75.75 0 0 1-1.06 0l-3.75-3.75a.75.75 0 0 1 0-1.06Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+
+    def fx_sort_up
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 4.72a.75.75 0 0 1 1.06 0l3.75 3.75a.75.75 0 0 1-1.06 1.06L12 6.31 8.78 9.53a.75.75 0 0 1-1.06-1.06l3.75-3.75Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+
+    def fx_sort_down
+      content_tag :svg, class: "size-4", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" do
+        concat(
+          content_tag(
+            :path,
+            "",
+            fill_rule: "evenodd",
+            d: "M11.47 19.28a.75.75 0 0 1 1.06 0l3.75-3.75a.75.75 0 0 1-1.06-1.06L12 17.69l-3.22-3.22a.75.75 0 1 1-1.06 1.06l3.75 3.75Z",
+            clip_rule: "evenodd"
+          )
+        )
+      end
+    end
+  end
+end

data/config/locales/en.yml

@@ -1,6 +1,39 @@
 en:
   fluxbit:
-    form_builder:
-      errors_summary:
-        one: "There is 1 error with this %{model}:"
-        other: "There are %{count} errors with this %{model}:"
+    alert:
+      aria_close: Close
+      dismiss: Dismiss
+    banner:
+      aria_close: Close
+      dismiss: Dismiss
+    drawer:
+      dismiss: Dismiss
+    modal:
+      aria_close: Close
+      dismiss: Dismiss
+    pagination:
+      aria_label:
+        nav:
+          one: Page
+          other: Pages
+        prev: Previous
+        next: Next
+        first: First
+        last: Last
+      first: First
+      last: Last
+      prev: Previous
+      next: Next
+    skeleton:
+      loading: Loading...
+    speed_dial:
+      open_actions_menu: Open actions menu
+    form:
+      password:
+        checks:
+          length: At least %{count} characters
+          uppercase: Contains uppercase letter
+          lowercase: Contains lowercase letter
+          numbers: Contains number
+          special: Contains special character
+        strength: Password strength

data/config/locales/pt-BR.yml

@@ -0,0 +1,36 @@
+pt-BR:
+  fluxbit:
+    alert:
+      aria_close: Close
+      dismiss: Dismiss
+    drawer:
+      dismiss: Dismiss
+    modal:
+      aria_close: Close
+      dismiss: Dismiss
+    pagination:
+      aria_label:
+        nav:
+          one: Página
+          other: Páginas
+        prev: Anterior
+        next: Próximo
+        first: Primeiro
+        last: Último
+      first: Primeiro
+      last: Último
+      prev: Anterior
+      next: Próximo
+    skeleton:
+      loading: Carregando...
+    speed_dial:
+      open_actions_menu: Abrir menu de ações
+    form:
+      password:
+        checks:
+          length: Pelo menos %{count} caracteres
+          uppercase: Contém letra maiúscula
+          lowercase: Contém letra minúscula
+          numbers: Contém número
+          special: Contém caractere especial
+        strength: Força da senha

data/lib/fluxbit/config/accordion_component.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::AccordionComponent
+  mattr_accessor :flush, default: false
+  mattr_accessor :color, default: :default
+  mattr_accessor :collapse_all, default: false
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "space-y-2",
+      item: {
+        base: "",
+        header: {
+          base: "flex items-center justify-between w-full p-5 font-medium rtl:text-right border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 gap-3",
+          first: "rounded-t-xl",
+          last: "rounded-b-xl",
+          middle: "border-b-0"
+        },
+        content: {
+          base: "p-5 border border-gray-200 dark:border-gray-700",
+          first: "",
+          last: "rounded-b-xl border-t-0",
+          middle: "border-t-0 border-b-0"
+        },
+        icon: {
+          base: "w-3 h-3 rotate-180 shrink-0",
+          open: "rotate-180",
+          closed: ""
+        }
+      },
+      colors: {
+        default: {
+          header: "bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400",
+          content: "bg-white dark:bg-gray-900 text-gray-500 dark:text-gray-400"
+        },
+        light: {
+          header: "bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white",
+          content: "bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white"
+        },
+        primary: {
+          header: "bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border-blue-200 dark:border-blue-800",
+          content: "bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-blue-100 border-blue-200 dark:border-blue-800"
+        },
+        secondary: {
+          header: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-700",
+          content: "bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 border-gray-300 dark:border-gray-700"
+        },
+        success: {
+          header: "bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100 border-green-200 dark:border-green-800",
+          content: "bg-green-50 dark:bg-green-900 text-green-900 dark:text-green-100 border-green-200 dark:border-green-800"
+        },
+        danger: {
+          header: "bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100 border-red-200 dark:border-red-800",
+          content: "bg-red-50 dark:bg-red-900 text-red-900 dark:text-red-100 border-red-200 dark:border-red-800"
+        },
+        warning: {
+          header: "bg-yellow-50 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800",
+          content: "bg-yellow-50 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100 border-yellow-200 dark:border-yellow-800"
+        },
+        info: {
+          header: "bg-cyan-50 dark:bg-cyan-900 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-800",
+          content: "bg-cyan-50 dark:bg-cyan-900 text-cyan-900 dark:text-cyan-100 border-cyan-200 dark:border-cyan-800"
+        },
+        dark: {
+          header: "bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 border-gray-700 dark:border-gray-600",
+          content: "bg-gray-800 dark:bg-gray-700 text-gray-100 dark:text-gray-200 border-gray-700 dark:border-gray-600"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/avatar_component.rb

@@ -32,7 +32,7 @@ module Fluxbit::Config::AvatarComponent
       },
       color: {
         dark: "ring-gray-800 dark:ring-gray-800",
-        failure: "ring-red-500 dark:ring-red-700",
+        danger: "ring-red-500 dark:ring-red-700",
         gray: "ring-gray-500 dark:ring-gray-400",
         info: "ring-cyan-400 dark:ring-cyan-800",
         light: "ring-gray-300 dark:ring-gray-500",
@@ -42,20 +42,20 @@ module Fluxbit::Config::AvatarComponent
         pink: "ring-pink-500 dark:ring-pink-500"
       },
       size: {
-        xs: "w-6 h-6",
-        sm: "w-8 h-8",
-        md: "w-10 h-10",
-        lg: "w-20 h-20",
-        xl: "w-36 h-36"
+        xs: "size-6",
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-20",
+        xl: "size-36"
       },
       placeholder_icon: {
         base: "relative overflow-hidden bg-gray-200 dark:bg-gray-600",
         size: {
-          xs: "w-8 h-8",
-          sm: "w-10 h-10",
-          md: "w-12 h-12",
-          lg: "w-22 h-22",
-          xl: "w-38 h-38"
+          xs: "size-8",
+          sm: "size-10",
+          md: "size-12",
+          lg: "size-22",
+          xl: "size-38"
         }
       },
       stacked: "ring-2 ring-gray-300 dark:ring-gray-500",

data/lib/fluxbit/config/badge_component.rb

@@ -12,12 +12,15 @@ module Fluxbit::Config::BadgeComponent
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
   mattr_accessor :styles do
     {
-      base: "inline-flex items-center gap-1 font-medium me-2 rounded-sm",
-      pill: "rounded-full",
+      base: "inline-flex items-center gap-1 font-medium me-2",
+      pill: {
+        off: "rounded-sm",
+        on: "rounded-full"
+      },
       colors: {
         info: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
         dark: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
-        failure: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
+        danger: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
         success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
         warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
         indigo: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300",
@@ -28,7 +31,7 @@ module Fluxbit::Config::BadgeComponent
         teal: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400",
         solid_info: "text-white bg-blue-500 border-1 border-white dark:border-gray-900",
         solid_dark: "text-white bg-gray-500 border-1 border-white dark:border-gray-900",
-        solid_failure: "text-white bg-red-500 border-1 border-white dark:border-gray-900",
+        solid_danger: "text-white bg-red-500 border-1 border-white dark:border-gray-900",
         solid_success: "text-white bg-green-500 border-1 border-white dark:border-gray-900",
         solid_warning: "text-white bg-yellow-500 border-1 border-white dark:border-gray-900",
         solid_indigo: "text-white bg-indigo-500 border-1 border-white dark:border-gray-900",
@@ -40,7 +43,7 @@ module Fluxbit::Config::BadgeComponent
 
         info_bordered: "bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border border-blue-400",
         dark_bordered: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border border-gray-500",
-        failure_bordered: "bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border border-red-400",
+        danger_bordered: "bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border border-red-400",
         success_bordered: "bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border border-green-400",
         warning_bordered: "bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300",
         indigo_bordered: "bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400",
@@ -55,12 +58,12 @@ module Fluxbit::Config::BadgeComponent
       ],
       perfect_rounded: [
         "h-fit px-2.5 py-0.5",
-        "justify-center w-4 h-4",
-        "justify-center w-6 h-6",
-        "justify-center w-8 h-8",
-        "justify-center w-10 h-10",
-        "justify-center w-12 h-12"
-    ],
+        "justify-center size-4",
+        "justify-center size-6",
+        "justify-center size-8",
+        "justify-center size-10",
+        "justify-center size-12"
+      ],
       notification: {
         default: "absolute",
         positions: {

data/lib/fluxbit/config/banner_component.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::BannerComponent
+  mattr_accessor :position, default: :top
+  mattr_accessor :color, default: :info
+  mattr_accessor :icon, default: :default
+  mattr_accessor :dismissible, default: true
+  mattr_accessor :full_width, default: true
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "border border-b",
+      positions: {
+        top: "relative",
+        bottom: "relative",
+        sticky_top: "fixed top-0 start-0 z-50 w-full",
+        sticky_bottom: "fixed bottom-0 start-0 z-50 w-full"
+      },
+      colors: {
+        info: "bg-blue-50 text-blue-800 border-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-600",
+        success: "bg-green-50 text-green-800 border-green-200 dark:bg-gray-800 dark:text-green-400 dark:border-green-600",
+        warning: "bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-600",
+        danger: "bg-red-50 text-red-800 border-red-200 dark:bg-gray-800 dark:text-red-400 dark:border-red-600",
+        dark: "bg-gray-50 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600",
+        light: "bg-white text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600",
+        primary: "bg-primary-50 text-primary-800 border-primary-200 dark:bg-gray-800 dark:text-primary-400 dark:border-primary-600",
+        secondary: "bg-gray-50 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600"
+      },
+      default_icons: {
+        info: "information-circle",
+        success: "check-circle",
+        warning: "exclamation-triangle",
+        danger: "exclamation-circle",
+        dark: "information-circle",
+        light: "information-circle",
+        primary: "information-circle",
+        secondary: "information-circle"
+      },
+      content_wrapper: {
+        full_width: "flex items-center justify-between w-full p-4",
+        constrained: "flex items-center justify-between max-w-screen-xl mx-auto p-4"
+      },
+      left_content: "flex items-center",
+      right_content: "flex items-center",
+      text: {
+        with_icon_or_logo: "ml-3 text-sm font-normal",
+        without_icon_or_logo: "text-sm font-normal"
+      },
+      dismiss_button: {
+        base: "flex-shrink-0 inline-flex justify-center w-7 h-7 items-center text-gray-400 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 dark:hover:bg-gray-600 dark:hover:text-white",
+        with_cta: "ml-3"
+      },
+      screen_reader: "sr-only",
+      icon_default: "size-5 text-current flex-shrink-0",
+      close_icon: "w-3 h-3"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/bottom_navigation_component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::BottomNavigationComponent
+  mattr_accessor :variant, default: :default
+  mattr_accessor :border, default: true
+
+  # rubocop:disable Layout/LineLength
+  mattr_accessor :styles do
+    {
+      variants: {
+        default: {
+          base: "fixed bottom-0 left-0 z-50 w-full h-16 bg-white dark:bg-gray-700",
+          base_with_button_group: "fixed bottom-0 left-0 z-50 w-full h-auto bg-white dark:bg-gray-700",
+          border: "border-t border-gray-200 dark:border-gray-600"
+        },
+        app_bar: {
+          base: "fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600",
+          base_with_button_group: "fixed z-50 w-full h-auto max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600",
+          border: ""
+        }
+      },
+      container: {
+        base: "grid h-full max-w-lg mx-auto font-medium",
+        base_with_button_group: "grid h-16 max-w-lg mx-auto font-medium",
+        columns: [
+          "grid-cols-2",  # 2 columns (index 0)
+          "grid-cols-3",  # 3 columns (index 1)
+          "grid-cols-4",  # 4 columns (index 2)
+          "grid-cols-5",  # 5 columns (index 3)
+          "grid-cols-6"   # 6 columns (index 4)
+        ]
+      },
+      item: {
+        base: "inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group",
+        active: "text-blue-600 dark:text-blue-500",
+        inactive: "text-gray-500 dark:text-gray-400",
+        icon_wrapper: "w-5 h-5 mb-2",
+        icon: "w-5 h-5",
+        text: "text-sm group-hover:text-blue-600 dark:group-hover:text-blue-500",
+        sr_only: "sr-only"
+      },
+      cta_wrapper: "flex items-center justify-center",
+      cta: {
+        button: "inline-flex items-center justify-center w-10 h-10 font-medium bg-blue-600 rounded-full hover:bg-blue-700 group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800",
+        icon: "w-4 h-4 text-white dark:text-white"
+      },
+      tooltip: {
+        base: "absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700",
+        arrow: "tooltip-arrow"
+      },
+      pagination: {
+        container: "inline-flex items-center justify-center col-span-2",
+        button: "inline-flex items-center justify-center h-full px-5 hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed",
+        icon: "w-3 h-3 text-gray-500 dark:text-gray-400",
+        info: "flex items-center text-sm text-gray-500 dark:text-gray-400",
+        sr_only: "sr-only"
+      },
+      button_group: {
+        container: "grid max-w-xs p-1 mx-auto my-2 bg-gray-100 rounded-lg dark:bg-gray-600",
+        grid: "grid gap-1",
+        button: "px-5 py-1.5 text-xs font-medium hover:bg-white dark:hover:bg-gray-700 rounded-lg",
+        button_active: "text-gray-900 bg-white dark:text-white dark:bg-gray-700",
+        button_inactive: "text-gray-500 dark:text-gray-400",
+        columns: [
+          "grid-cols-2",  # 2 columns (index 0)
+          "grid-cols-3",  # 3 columns (index 1)
+          "grid-cols-4",  # 4 columns (index 2)
+          "grid-cols-5"   # 5 columns (index 3)
+        ]
+      }
+    }
+  end
+  # rubocop:enable Layout/LineLength
+end

data/lib/fluxbit/config/breadcrumb_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::BreadcrumbComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      root: {
+        base: "",
+        list: "inline-flex items-center"
+      },
+      item: {
+        base: "group flex items-center",
+        chevron: "mx-1 h-4 w-4 text-gray-400 group-first:hidden md:mx-2",
+        icon: "mr-2 h-4 w-4",
+        click_cursor: "cursor-pointer",
+        href: {
+          on:  "flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white",
+          off: "flex items-center text-sm font-medium text-gray-500 dark:text-gray-400"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/button_component.rb

@@ -5,18 +5,19 @@ module Fluxbit::Config::ButtonComponent
   mattr_accessor :pill, default: false
   mattr_accessor :size, default: 1
   mattr_accessor :as, default: :button
+  mattr_accessor :selected, default: false
 
   # TODO: Gradient and Gradient Duotone need their outline version.
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
   mattr_accessor :styles do
     {
-      base: "group flex items-center justify-center p-0.5 text-center font-medium relative focus:z-10 focus:outline-hidden",
+      base: "group flex items-center justify-center text-center font-medium relative focus:z-10 focus:outline-hidden",
       full_sized: "w-full",
       colors: {
         transparent: "text-slate-500 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white",
         default: "text-white bg-blue-700 border border-transparent enabled:hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
         success: "text-white bg-green-700 border border-transparent enabled:hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:enabled:hover:bg-green-700 dark:focus:ring-green-800",
-        failure: "text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",
+        danger: "text-white bg-red-700 border border-transparent enabled:hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:enabled:hover:bg-red-700 dark:focus:ring-red-900",
         info: "text-white bg-cyan-700 border border-transparent enabled:hover:bg-cyan-800 focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:enabled:hover:bg-cyan-700 dark:focus:ring-cyan-800",
         warning: "text-white bg-yellow-400 border border-transparent enabled:hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900",
         dark: "text-white bg-gray-800 border border-transparent enabled:hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 dark:bg-gray-800 dark:enabled:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700",
@@ -25,7 +26,7 @@ module Fluxbit::Config::ButtonComponent
 
         default_outline: "text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-hidden focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 dark:focus:ring-blue-800",
         success_outline: "text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-hidden focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800",
-        failure_outline: "text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900",
+        danger_outline: "text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-hidden focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900",
         info_outline: "text-cyan-400 hover:text-white border border-cyan-400 hover:bg-cyan-500 focus:ring-4 focus:outline-hidden focus:ring-cyan-300 dark:border-cyan-300 dark:text-cyan-300 dark:hover:text-white dark:hover:bg-cyan-400 dark:focus:ring-cyan-900",
         warning_outline: "text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-hidden focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900",
         dark_outline: "text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 focus:ring-4 focus:outline-hidden focus:ring-gray-300 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-800",
@@ -33,7 +34,7 @@ module Fluxbit::Config::ButtonComponent
         purple_outline: "text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-hidden focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900",
 
         info_gradient: "text-white bg-gradient-to-r from-cyan-500 via-cyan-600 to-cyan-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800 ",
-        failure_gradient: "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800",
+        danger_gradient: "text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800",
         success_gradient: "text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800",
         cyan_gradient: "text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
         lime_gradient: "text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800",
@@ -50,6 +51,7 @@ module Fluxbit::Config::ButtonComponent
         teal_to_lime_gradient: "text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 enabled:hover:bg-gradient-to-l enabled:hover:from-teal-200 enabled:hover:to-lime-200 enabled:hover:text-gray-900 focus:ring-4 focus:ring-lime-200 dark:focus:ring-teal-700"
       },
       disabled: "cursor-not-allowed opacity-50",
+      selected: "brightness-90 dark:brightness-75",
       inner: {
         base: "flex items-stretch items-center transition-all duration-200",
         position: {