fluxbit_view_components 0.2.0 → 0.4.0

data/lib/fluxbit/config/skeleton_component.rb

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

data/lib/fluxbit/config/speed_dial_component.rb

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

data/lib/fluxbit/config/spinner_component.rb

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

data/lib/fluxbit/config/spinner_percent_component.rb

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

data/lib/fluxbit/config/stepper_component.rb

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

data/lib/fluxbit/config/tab_component.rb

@@ -5,6 +5,7 @@ module Fluxbit::Config::TabComponent
   mattr_accessor :color, default: :blue
   mattr_accessor :vertical, default: false
   mattr_accessor :tab_panel, default: :default
+  mattr_accessor :align, default: :left
 
   # rubocop: disable Layout/LineLength, Metrics/BlockLength
   mattr_accessor :styles do
@@ -18,6 +19,11 @@ module Fluxbit::Config::TabComponent
           horizontal: "flex text-center",
           vertical: "flex-column space-y space-y-4 text-sm font-medium text-gray-500 dark:text-gray-400 md:me-4 mb-4 md:mb-0"
         },
+        align: {
+          left: "justify-start",
+          center: "justify-center",
+          right: "justify-end"
+        },
         li: "",
         variant: {
           default: "flex-wrap text-sm font-medium text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400",

data/lib/fluxbit/config/table_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::TableComponent
+  mattr_accessor :striped, default: false
+  mattr_accessor :bordered, default: false
+  mattr_accessor :hover, default: false
+  mattr_accessor :shadow, default: false
+
+  # rubocop: disable Layout/LineLength, Metrics/BlockLength
+  mattr_accessor :styles do
+    {
+      root: {
+        base: "w-full text-left text-sm rtl:text-right text-gray-500 dark:text-gray-400",
+        shadow: "absolute left-0 top-0 -z-10 h-full w-full rounded-lg bg-white drop-shadow-md dark:bg-black"
+      },
+      wrapper: {
+        base: "overflow-x-auto relative",
+        shadow: "shadow-md sm:rounded-lg"
+      },
+      head: {
+        base: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
+        cell: "px-6 py-3"
+      },
+      footer: {
+        base: "text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400",
+        cell: "px-6 py-3"
+      },
+      body: {
+        base: "bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200"
+      },
+      row: {
+        base: "",
+        bordered: "border-b dark:border-gray-700 border-gray-200",
+        hovered: {
+          default: "hover:bg-gray-200 dark:hover:bg-gray-600",
+          primary: "hover:bg-blue-200 dark:hover:bg-blue-700",
+          secondary: "hover:bg-gray-200 dark:hover:bg-gray-700",
+          success: "hover:bg-green-200 dark:hover:bg-green-700",
+          danger: "hover:bg-red-200 dark:hover:bg-red-700",
+          warning: "hover:bg-yellow-200 dark:hover:bg-yellow-700",
+          info: "hover:bg-cyan-200 dark:hover:bg-cyan-700",
+          light: "hover:bg-gray-300 dark:hover:bg-gray-700",
+          dark: "hover:bg-gray-700 dark:hover:bg-gray-200"
+        },
+        striped: {
+          default: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-900 even:dark:bg-gray-800",
+          primary: "odd:bg-blue-50 even:bg-blue-100 odd:dark:bg-blue-900 even:dark:bg-blue-800",
+          secondary: "odd:bg-gray-50 even:bg-gray-100 odd:dark:bg-gray-900 even:dark:bg-gray-800",
+          success: "odd:bg-green-50 even:bg-green-100 odd:dark:bg-green-900 even:dark:bg-green-800",
+          danger: "odd:bg-red-50 even:bg-red-100 odd:dark:bg-red-900 even:dark:bg-red-800",
+          warning: "odd:bg-yellow-50 even:bg-yellow-100 odd:dark:bg-yellow-900 even:dark:bg-yellow-800",
+          info: "odd:bg-cyan-50 even:bg-cyan-100 odd:dark:bg-cyan-900 even:dark:bg-cyan-800",
+          light: "odd:bg-gray-100 even:bg-gray-200 odd:dark:bg-gray-700 even:dark:bg-gray-600",
+          dark: "odd:bg-gray-800 even:bg-gray-900 odd:dark:bg-gray-200 even:dark:bg-gray-100"
+        },
+        colors: {
+          default: "",
+          primary: "bg-blue-50 dark:bg-blue-900",
+          secondary: "bg-gray-50 dark:bg-gray-800",
+          success: "bg-green-50 dark:bg-green-900",
+          danger: "bg-red-50 dark:bg-red-900",
+          warning: "bg-yellow-50 dark:bg-yellow-900",
+          info: "bg-cyan-50 dark:bg-cyan-900",
+          light: "bg-gray-100 dark:bg-gray-700",
+          dark: "bg-gray-800 dark:bg-gray-200"
+        },
+        cell: {
+          base: "px-6 py-2",
+          selected: "font-medium text-gray-900 whitespace-nowrap dark:text-white"
+        }
+      }
+    }
+  end
+  # rubocop: enable Layout/LineLength, Metrics/BlockLength
+end

data/lib/fluxbit/config/theme_button_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Fluxbit::Config::ThemeButtonComponent
+  # Theme button specific defaults
+  mattr_accessor :color, default: :transparent
+  mattr_accessor :pill, default: true
+  mattr_accessor :size, default: 2
+  mattr_accessor :as, default: :button
+
+  # Delegate styles to ButtonComponent (class method)
+  def self.styles
+    Fluxbit::Config::ButtonComponent.styles
+  end
+
+  # Delegate styles to ButtonComponent (instance method for tests)
+  def styles
+    Fluxbit::Config::ButtonComponent.styles
+  end
+end