fluxbit_view_components 0.3.0 → 0.4.0

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: {

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

@@ -5,7 +5,7 @@ module Fluxbit::Config::Form::CheckBoxComponent
   mattr_accessor :styles do
     {
       checkbox: "rounded-sm",
-      base: "w-4 h-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",
+      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"

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

@@ -12,7 +12,7 @@ module Fluxbit::Config::Form::DropzoneComponent
       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: "w-10 h-10 mb-4 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

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

@@ -10,7 +10,7 @@ module Fluxbit::Config::Form::HelpTextComponent
       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

@@ -3,7 +3,7 @@
 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: "w-4 h-4"
+  mattr_accessor :helper_popover_icon_class, default: "size-4"
   mattr_accessor :sizing, default: 1
   mattr_accessor :helper_popover_placement, default: "right"
 
@@ -14,7 +14,7 @@ module Fluxbit::Config::Form::LabelComponent
       colors: {
         default: "text-gray-900 dark:text-white",
         success: "text-green-700 dark:text-green-500",
-        failure: "text-red-700 dark:text-red-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"
       },
@@ -23,6 +23,7 @@ module Fluxbit::Config::Form::LabelComponent
         "text-md",
         "text-lg"
       ],
+      required: "text-red-500 px-1 required",
       helper_popover: "px-2 text-slate-400"
     }
   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/text_field_component.rb

@@ -11,35 +11,35 @@ module Fluxbit::Config::Form::TextFieldComponent
       text: {
         default: "text-slate-900 dark:text-white",
         success: "text-green-900",
-        failure: "text-red-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",
-        failure: "focus:ring-red-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",
-        failure: "bg-red-50 dark:bg-red-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",
-        failure: "placeholder-red-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",
-        failure: "border-red-500 focus:border-red-500 dark:border-red-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"
       },
@@ -54,18 +54,18 @@ module Fluxbit::Config::Form::TextFieldComponent
       ],
       additional_icons: {
         class: {
-          default: "mt-1 w-4 h-4 text-slate-500 dark:text-slate-400",
-          success: "mt-1 w-4 h-4 text-green-500 dark:text-green-400",
-          failure: "mt-1 w-4 h-4 text-red-500 dark:text-red-400",
-          info: "mt-1 w-4 h-4 text-cyan-500 dark:text-cyan-400",
-          warning: "mt-1 w-4 h-4 text-yellow-500 dark:text-yellow-400"
+          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",
-          failure: "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",
+          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"
         }

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

@@ -11,13 +11,13 @@ module Fluxbit::Config::Form::ToggleComponent
   mattr_accessor :styles do
     {
       label: "text-sm rtl:text-right font-medium text-gray-700 dark:text-gray-200 flex items-center",
-      input: "w-4 h-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",
+      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",
-          failure: "peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-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",
@@ -33,7 +33,7 @@ module Fluxbit::Config::Form::ToggleComponent
           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",
-          failure: "bg-red-600 dark:bg-red-500 dark:border-red-500 after:border-red-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",
@@ -45,7 +45,7 @@ module Fluxbit::Config::Form::ToggleComponent
           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_failure: "bg-red-200 dark:bg-red-700 dark:border-red-600 after:border-red-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",
@@ -58,7 +58,7 @@ module Fluxbit::Config::Form::ToggleComponent
         button: {
           default: "after:bg-white",
           success: "after:bg-green-500",
-          failure: "after:bg-red-500",
+          danger: "after:bg-red-500",
           info: "after:bg-cyan-500"
 
         },