fluxbit_view_components 0.1.0

data/app/components/fluxbit/tooltip_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+# The `Fluxbit::TooltipComponent` is a component for rendering customizable tooltips.
+# It extends `Fluxbit::Component` and provides options for configuring the tooltip's
+# appearance and behavior. You can control the arrow visibility, and other attributes.
+# The tooltip can display additional information when the user hovers over or focuses
+# on an element.
+class Fluxbit::TooltipComponent < Fluxbit::Component
+  include Fluxbit::Config::TooltipComponent
+
+  # Initializes the tooltip component with the given properties.
+  #
+  # @param [Hash] props The properties to customize the tooltip.
+  # @option props [Boolean] :has_arrow (true) Determines if an arrow should be displayed on the tooltip.
+  # @option props [Hash] **props Remaining options declared as HTML attributes, applied to the tooltip container.
+  def initialize(**props)
+    super
+    @props = props
+    @has_arrow = options @props.delete(:has_arrow), default: true
+    @props["role"] = "tooltip"
+
+    add(class: styles[:base], to: @props)
+    @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])
+  end
+
+  def call
+    content_tag(:div, @props) do
+      concat content
+      concat arrow
+    end
+  end
+
+  def arrow
+    return "" unless @has_arrow
+
+    content_tag :div, "", "data-popper-arrow" => true, class: "tooltip-arrow"
+  end
+end

data/app/helpers/fluxbit/classes_helper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ClassesHelper
+    def fx_body_class
+      "h-full bg-slate-100 dark:bg-slate-900 dark:text-white"
+    end
+
+    def fx_darkmode_js
+      <<-SCRIPT.squish
+        <script>
+          if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+              document.documentElement.classList.add('dark');
+          } else {
+              document.documentElement.classList.remove('dark')
+          }
+        </script>
+      SCRIPT
+    end
+  end
+end

data/app/helpers/fluxbit/components_helper.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Fluxbit
+  module ComponentsHelper
+    # Components
+    def fx_avatar(...) = fluxbit_method("Avatar", ...)
+    def fx_avatar_group(...) = fluxbit_method("AvatarGroup", ...)
+    def fx_gravatar(...) = fluxbit_method("Gravatar", ...)
+    def fx_alert(...) = fluxbit_method("Alert", ...)
+    def fx_button(...) = fluxbit_method("Button", ...)
+    def fx_button_group(...) = fluxbit_method("ButtonGroup", ...)
+    def fx_badge(...) = fluxbit_method("Badge", ...)
+    def fx_card(...) = fluxbit_method("Card", ...)
+    def fx_modal(...) = fluxbit_method("Modal", ...)
+    def fx_popover(...) = fluxbit_method("Popover", ...)
+    def fx_tooltip(...) = fluxbit_method("Tooltip", ...)
+    def fx_flex(...) = fluxbit_method("Flex", ...)
+    def fx_tab(...) = fluxbit_method("Tab", ...)
+
+    # Forms
+    def fx_helper_text(...) = fluxbit_method("Form::HelperText", ...)
+    def fx_checkbox_input(...) = fluxbit_method("Form::CheckboxInput", ...)
+    def fx_form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
+    def fx_label(...) = fluxbit_method("Form::Label", ...)
+    def fx_range_input(...) = fluxbit_method("Form::RangeInput", ...)
+    def fx_select_input(...) = fluxbit_method("Form::SelectInput", ...)
+    def fx_select_free_input(...) = fluxbit_method("Form::SelectFreeInput", ...)
+    def fx_text_input(...) = fluxbit_method("Form::TextInput", ...)
+    def fx_textarea_input(...) = fluxbit_method("Form::TextareaInput", ...)
+    def fx_toggle_input(...) = fluxbit_method("Form::ToggleInput", ...)
+    def form_builder(...) = fluxbit_method("Form::FormBuilder", ...)
+
+    # Typography
+    def fx_heading(...) = fluxbit_method("Heading", ...)
+    def fx_txt(...) = fluxbit_method("Text", ...)
+
+    def fluxbit_method(method_name, *args, **kwargs, &c)
+      component_klass = "Fluxbit::#{method_name}Component".constantize
+      if kwargs[:with_content]
+        content = kwargs.delete(:with_content)
+        render(component_klass.new(*args, **kwargs).with_content(content), &c)
+      else
+        render(component_klass.new(*args, **kwargs), &c)
+      end
+    end
+
+    # # Succint method for render component
+    # # from: https://dev.to/abeidahmed/advanced-viewcomponent-patterns-in-rails-2b4m
+    # #
+    # # Instead of using 'render XComponent'
+    # # One can use 'render_component "X", **@options'
+    # def render_component(component_path, collection: nil, with_content: nil, **options, &block)
+    #   component_klass = "#{component_path.classify}Component".constantize
+
+    #   return render component_klass.new(**options).with_content(with_content) if with_content
+
+    #   if collection
+    #     render component_klass.with_collection(collection, **options), &block
+    #   else
+    #     render component_klass.new(**options), &block
+    #   end
+    # end
+
+    # def method_missing(name, *args, &block)
+    #   if name == :alert
+    #     render component_klass.new(**options), &block
+    #     # do something if the method name is "custom_helper_method"
+    #     #content_tag(:div, *args, &block)
+    #   else
+    #     # call the original method_missing method if the method name is not recognized
+    #     super
+    #   end
+    # end
+  end
+end

data/config/deploy.yml

@@ -0,0 +1,37 @@
+service: fluxbit_view_components
+image: kirillplatonov/fluxbit_view_components
+
+registry:
+  username: kirillplatonov
+  password:
+    - KAMAL_REGISTRY_PASSWORD
+
+env:
+  secret:
+    - RAILS_MASTER_KEY
+
+servers:
+  web:
+    hosts:
+      - 195.201.128.126
+    labels:
+      traefik.http.routers.fluxbit_view_components.entrypoints: websecure
+      traefik.http.routers.fluxbit_view_components.rule: "Host(`fluxbitviewcomponents.org`) || Host(`www.fluxbitviewcomponents.org`)"
+      traefik.http.routers.fluxbit_view_components.tls.certresolver: letsencrypt
+
+traefik:
+  options:
+    publish:
+      - "443:443"
+    volume:
+      - "/letsencrypt/acme.json:/letsencrypt/acme.json"
+  args:
+    entryPoints.web.address: ":80"
+    entryPoints.websecure.address: ":443"
+    entryPoints.web.http.redirections.entryPoint.to: websecure # We want to force https
+    entryPoints.web.http.redirections.entryPoint.scheme: https
+    entryPoints.web.http.redirections.entrypoint.permanent: true
+    certificatesResolvers.letsencrypt.acme.email: "admin@fluxbitviewcomponents.org"
+    certificatesResolvers.letsencrypt.acme.storage: "/letsencrypt/acme.json" # Must match the path in `volume`
+    certificatesResolvers.letsencrypt.acme.httpchallenge: true
+    certificatesResolvers.letsencrypt.acme.httpchallenge.entrypoint: web

data/config/locales/en.yml

@@ -0,0 +1,6 @@
+en:
+  fluxbit:
+    form_builder:
+      errors_summary:
+        one: "There is 1 error with this %{model}:"
+        other: "There are %{count} errors with this %{model}:"

data/lib/fluxbit/config/alert_component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::AlertComponent
+  mattr_accessor :color, default: :info
+  mattr_accessor :icon, default: :default
+  mattr_accessor :can_close, default: true
+  mattr_accessor :out_animation, default: :fade_out
+  mattr_accessor :fade_in_animation, default: true
+  mattr_accessor :dismiss_timeout, default: 3000
+  mattr_accessor :all_rounded, default: true
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "flex p-4 mb-4 dark:bg-gray-800 ",
+      all_rounded: {
+        on: "rounded-lg border-2",
+        off: "rounded-l-lg border-l-2 border-y-2"
+      },
+      colors: {
+        info: "text-blue-800 border-blue-300 bg-blue-50 dark:text-blue-400 dark:border-blue-800",
+        danger: "text-red-800 border-red-300 bg-red-50 dark:text-red-400 dark:border-red-800",
+        success: "text-green-800 border-green-300 bg-green-50 dark:text-green-400 dark:border-green-800",
+        warning: "text-yellow-800 border-yellow-300 bg-yellow-50 dark:text-yellow-300 dark:border-yellow-800",
+        dark: "border-gray-300 bg-gray-50 dark:border-gray-600"
+      },
+      close_button: {
+        base: "ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex justify-center h-8 w-8 dark:bg-gray-800",
+        colors: {
+          info: "bg-blue-50 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:text-blue-400 dark:hover:bg-gray-700",
+          danger: "bg-red-50 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:text-red-400 dark:hover:bg-gray-700",
+          success: "bg-green-50 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:text-green-400 dark:hover:bg-gray-700",
+          warning: "bg-yellow-50 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:text-yellow-300 dark:hover:bg-gray-700",
+          dark: "bg-gray-50 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white"
+        }
+      },
+      default_icons: {
+        info: "information-circle",
+        danger: "exclamation-triangle",
+        success: "check-circle",
+        warning: "exclamation-circle",
+        dark: "information-circle"
+      },
+      animations: {
+        just_remove: { from: "", to: "" },
+        dont_remove: "",
+        fade_out: { from: "opacity-100", to: "opacity-0" },
+        fade_out_to_right: { from: "opacity-100 translate-x-0", to: "opacity-0 translate-x-6" },
+        fade_out_to_left: { from: "opacity-100 translate-x-0", to: "opacity-0 -translate-x-6" },
+        fade_out_to_top: { from: "opacity-100 translate-x-0", to: "opacity-0 -translate-y-6" },
+        fade_out_to_bottom: { from: "opacity-100 translate-x-0", to: "opacity-0 translate-y-6" },
+        fade_out_and_shrink: { from: "opacity-100 scale-100", to: "opacity-0 scale-50" },
+        fade_out_and_stretch: { from: "opacity-100 scale-100", to: "opacity-0 scale-150" },
+        fade_out_and_rotate: { from: "opacity-100 rotate-0", to: "opacity-0 rotate-45" }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/avatar_component.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::AvatarComponent
+  mattr_accessor :color, default: nil
+  mattr_accessor :placeholder_initials, default: false
+  mattr_accessor :status, default: false # online, busy, offline, away
+  mattr_accessor :status_position, default: :top_right
+  mattr_accessor :rounded, default: true
+  mattr_accessor :size, default: :md
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      bordered: "p-1 ring-2",
+      rounded: {
+        base: "rounded-full",
+        status_position: {
+          top: "top-0",
+          bottom: "bottom-0",
+          left: { xs: "-left-1", sm: "left-0", md: "left-1", lg: "left-1", xl: "left-6" },
+          right: { xs: "left-4", sm: "left-5", md: "left-7", lg: "left-12", xl: "left-24" }
+        }
+      },
+      not_rounded: {
+        base: "rounded-sm",
+        status_position: {
+          top: "-top-1",
+          bottom: "-bottom-1",
+          left: { xs: "-left-1", sm: "-left-1", md: "-left-1", lg: "-left-1", xl: "-left-1" },
+          right: { xs: "left-4", sm: "left-5", md: "left-7", lg: "left-18", xl: "left-32" }
+        }
+      },
+      color: {
+        dark: "ring-gray-800 dark:ring-gray-800",
+        failure: "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",
+        purple: "ring-purple-500 dark:ring-purple-600",
+        success: "ring-green-500 dark:ring-green-500",
+        warning: "ring-yellow-300 dark:ring-yellow-500",
+        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"
+      },
+      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"
+        }
+      },
+      stacked: "ring-2 ring-gray-300 dark:ring-gray-500",
+      status: {
+        base: "absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800",
+        options: {
+          away: "bg-yellow-400",
+          busy: "bg-red-400",
+          offline: "bg-gray-400",
+          online: "bg-green-400"
+        }
+      },
+      initials: {
+        text: "font-medium text-gray-600 dark:text-gray-300",
+        base: "inline-flex overflow-hidden relative justify-center items-center bg-gray-200 dark:bg-gray-600"
+      },
+      group: "flex -space-x-4 rtl:space-x-reverse"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/badge_component.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::BadgeComponent
+  mattr_accessor :color, default: :info
+  mattr_accessor :border, default: false
+  mattr_accessor :pill, default: false
+  mattr_accessor :size, default: 0
+  mattr_accessor :as, default: :div
+  mattr_accessor :perfect_rounded, default: 0
+  mattr_accessor :notification, default: ""
+
+  # 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",
+      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",
+        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",
+        purple: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300",
+        pink: "bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300",
+        cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200",
+        lime: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400",
+        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_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",
+        solid_purple: "text-white bg-purple-500 border-1 border-white dark:border-gray-900",
+        solid_pink: "text-white bg-pink-500 border-1 border-white dark:border-gray-900",
+        solid_cyan: "text-white bg-cyan-500 border-1 border-white dark:border-gray-900",
+        solid_lime: "text-white bg-lime-500 border-1 border-white dark:border-gray-900",
+        solid_teal: "text-white bg-teal-500 border-1 border-white dark:border-gray-900",
+
+        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",
+        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",
+        purple_bordered: "bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border border-purple-400",
+        pink_bordered: "bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border border-pink-400",
+        cyan_bordered: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200 border border-cyan-400",
+        lime_bordered: "bg-lime-100 text-lime-800 dark:bg-lime-900 dark:text-lime-400 border border-lime-400",
+        teal_bordered: "bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400 border border-teal-400"
+      },
+      sizes: [
+        "p-1 text-xs", "p-1.5 text-sm"
+      ],
+      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"
+    ],
+      notification: {
+        default: "absolute",
+        positions: {
+          top: "-top-1",
+          bottom: "top-5",
+          left: "end-4",
+          right: "-end-4"
+        }
+      },
+      dismissable: "ml-2 cursor-pointer"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/button_component.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::ButtonComponent
+  mattr_accessor :color, default: :default
+  mattr_accessor :pill, default: false
+  mattr_accessor :size, default: 1
+  mattr_accessor :as, default: :button
+
+  # 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",
+      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",
+        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",
+        light: "text-gray-900 bg-white border border-gray-300 enabled:hover:bg-gray-100 focus:ring-4 focus:ring-cyan-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:enabled:hover:bg-gray-700 dark:enabled:hover:border-gray-700 dark:focus:ring-gray-700",
+        purple: "text-white bg-purple-700 border border-transparent enabled:hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:enabled:hover:bg-purple-700 dark:focus:ring-purple-900",
+
+        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",
+        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",
+        light_outline: "text-gray-900 hover:text-white border border-gray-300 hover:bg-gray-300 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",
+        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",
+        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",
+        pink_gradient: "text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800",
+        purple_gradient: "text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800",
+        teal_gradient: "text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 enabled:hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800",
+
+        cyan_to_blue_gradient: "text-white bg-gradient-to-r from-cyan-500 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
+        green_to_blue_gradient: "text-white bg-gradient-to-br from-green-400 to-cyan-600 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800",
+        pink_to_orange_gradient: "text-white bg-gradient-to-br from-pink-500 to-orange-400 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800",
+        purple_to_blue_gradient: "text-white bg-gradient-to-br from-purple-600 to-cyan-500 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800",
+        purple_to_pink_gradient: "text-white bg-gradient-to-r from-purple-500 to-pink-500 enabled:hover:bg-gradient-to-l focus:ring-4 focus:ring-purple-200 dark:focus:ring-purple-800",
+        red_to_yellow_gradient: "text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 enabled:hover:bg-gradient-to-bl focus:ring-4 focus:ring-red-100 dark:focus:ring-red-400",
+        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",
+      inner: {
+        base: "flex items-stretch items-center transition-all duration-200",
+        position: {
+          none: "",
+          start: "rounded-r-none",
+          middle: "rounded-none",
+          end: "rounded-l-none"
+        },
+        outline: "border border-transparent"
+      },
+      outline: {
+        off: "",
+        on: "justify-center transition-all duration-75 ease-in group-enabled:group-hover:bg-opacity-0 group-enabled:group-hover:text-inherit",
+        pill: {
+          off: "rounded-md",
+          on: "rounded-full"
+        }
+      },
+      pill: {
+        off: "rounded-lg",
+        on: "rounded-full"
+      },
+      size: [
+        "text-xs p-1",
+        "text-sm p-1.5",
+        "text-sm p-2",
+        "text-base p-2.5",
+        "text-base p-3"
+      ],
+      group: "inline-flex rounded-md shadow-xs"
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/card_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::CardComponent
+  mattr_accessor :color, default: :info
+  mattr_accessor :icon, default: :default
+  mattr_accessor :can_close, default: true
+  mattr_accessor :out_animation, default: :fade_out
+  mattr_accessor :fade_in_animation, default: true
+  mattr_accessor :dismiss_timeout, default: 3000
+  mattr_accessor :all_rounded, default: true
+
+  # 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"
+      },
+      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"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/flex_component.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::FlexComponent
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      resolutions: [ :sm, :md, :lg, :xl, :'2xl' ],
+      base: "flex",
+      direction: {
+        horizontal: "flex-row",
+        vertical: "flex-col",
+        horizontal_reverse: "flex-row-reverse",
+        vertical_reverse: "flex-col-reverse"
+      },
+      justify_content: {
+        start: "justify-start",
+        end: "justify-end",
+        center: "justify-center",
+        baseline: "justify-baseline",
+        stretch: "justify-stretch",
+        space_around: "justify-around",
+        space_between: "justify-between",
+        space_evenly: "justify-evenly",
+        normal: "justify-normal"
+      },
+      align_items: {
+        start: "items-start",
+        end: "items-end",
+        center: "items-center",
+        baseline: "items-baseline",
+        stretch: "items-stretch"
+      },
+      wrap: {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        wrap_reverse: "flex-wrap-reverse"
+      },
+      gap: [ "gap-0", "gap-2", "gap-4", "gap-6", "gap-8", "gap-10", "gap-12", "gap-14", "gap-16", "gap-18", "gap-20" ],
+      elements: [
+        "sm:justify-start", "sm:justify-end", "sm:justify-center", "sm:justify-baseline", "sm:justify-stretch", "sm:justify-around", "sm:justify-between", "sm:justify-evenly", "sm:justify-normal",
+        "sm:flex-row", "sm:flex-col", "sm:flex-row-reverse", "sm:flex-col-reverse", "sm:items-start", "sm:items-end", "sm:items-center", "sm:items-baseline", "sm:items-stretch", "sm:flex-wrap", "sm:flex-nowrap", "sm:flex-wrap-reverse",
+        "sm:gap-0", "sm:gap-2", "sm:gap-4", "sm:gap-6", "sm:gap-8", "sm:gap-10", "sm:gap-12", "sm:gap-14", "sm:gap-16", "sm:gap-18", "sm:gap-20",
+
+        "md:justify-start", "md:justify-end", "md:justify-center", "md:justify-baseline", "md:justify-stretch", "md:justify-around", "md:justify-between", "md:justify-evenly", "md:justify-normal",
+        "md:flex-row", "md:flex-col", "md:flex-row-reverse", "md:flex-col-reverse", "md:items-start", "md:items-end", "md:items-center", "md:items-baseline", "md:items-stretch", "md:flex-wrap", "md:flex-nowrap", "md:flex-wrap-reverse",
+        "md:gap-0", "md:gap-2", "md:gap-4", "md:gap-6", "md:gap-8", "md:gap-10", "md:gap-12", "md:gap-14", "md:gap-16", "md:gap-18", "md:gap-20",
+
+        "lg:justify-start", "lg:justify-end", "lg:justify-center", "lg:justify-baseline", "lg:justify-stretch", "lg:justify-around", "lg:justify-between", "lg:justify-evenly", "lg:justify-normal",
+        "lg:flex-row", "lg:flex-col", "lg:flex-row-reverse", "lg:flex-col-reverse", "lg:items-start", "lg:items-end", "lg:items-center", "lg:items-baseline", "lg:items-stretch", "lg:flex-wrap", "lg:flex-nowrap", "lg:flex-wrap-reverse",
+        "lg:gap-0", "lg:gap-2", "lg:gap-4", "lg:gap-6", "lg:gap-8", "lg:gap-10", "lg:gap-12", "lg:gap-14", "lg:gap-16", "lg:gap-18", "lg:gap-20",
+
+        "xl:justify-start", "xl:justify-end", "xl:justify-center", "xl:justify-baseline", "xl:justify-stretch", "xl:justify-around", "xl:justify-between", "xl:justify-evenly", "xl:justify-normal",
+        "xl:flex-row", "xl:flex-col", "xl:flex-row-reverse", "xl:flex-col-reverse", "xl:items-start", "xl:items-end", "xl:items-center", "xl:items-baseline", "xl:items-stretch", "xl:flex-wrap", "xl:flex-nowrap", "xl:flex-wrap-reverse",
+        "xl:gap-0", "xl:gap-2", "xl:gap-4", "xl:gap-6", "xl:gap-8", "xl:gap-10", "xl:gap-12", "xl:gap-14", "xl:gap-16", "xl:gap-18", "xl:gap-20",
+
+        "2xl:justify-start", "2xl:justify-end", "2xl:justify-center", "2xl:justify-baseline", "2xl:justify-stretch", "2xl:justify-around", "2xl:justify-between", "2xl:justify-evenly", "2xl:justify-normal",
+        "2xl:flex-row", "2xl:flex-col", "2xl:flex-row-reverse", "2xl:flex-col-reverse", "2xl:items-start", "2xl:items-end", "2xl:items-center", "2xl:items-baseline", "2xl:items-stretch", "2xl:flex-wrap", "2xl:flex-nowrap", "2xl:flex-wrap-reverse",
+        "2xl:gap-0", "2xl:gap-2", "2xl:gap-4", "2xl:gap-6", "2xl:gap-8", "2xl:gap-10", "2xl:gap-12", "2xl:gap-14", "2xl:gap-16", "2xl:gap-18", "2xl:gap-20"
+      ]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

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

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::Form::HelperTextComponent
+  mattr_accessor :color, default: :default
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      base: "text-sm ",
+      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",
+        info: "text-cyan-600 dark:text-cyan-500",
+        warning: "text-yellow-600 dark:text-yellow-500"
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/gravatar_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::GravatarComponent
+  mattr_accessor :rating, default: :pg
+  mattr_accessor :filetype, default: :png
+  mattr_accessor :default, default: :robohash # options: 404, mp (mystery person), identicon, monsterid, wavatar, retro, robohash, blank
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :gravatar_styles do
+    {
+      base: "bg-gray-200 dark:bg-gray-600",
+      default: %i[404 mp identicon monsterid wavatar retro robohash blank],
+      size: { xs: 30, sm: 40, md: 50, lg: 100, xl: 200 },
+      rating: %i[g pg r x],
+      filetype: %i[jpg jpeg gif png heic]
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end