flowbite-components 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f32fb05b632e935c29d9f6a9a62fafa1d29ee13f80b9edf28040067a2a4fa54
-  data.tar.gz: 59eda6515de3eba70480afc5cea58687eaddaa453f8db7949ab5ae2f67288862
+  metadata.gz: afc7f639fa9f28b2310d7f68cd3d8939e3eaa526ba80ee028c471664597e4581
+  data.tar.gz: 1b4e73f0bd471b9b3d36db8aba2e614e28f5573cbf7fd214de360a985767eade
 SHA512:
-  metadata.gz: 1e00a5308ab23bc68e6946fb6c068f01e91773c6dc3b37454fb5057d9b35268303001ba6135a4c77d746006dea9ebafa8962e34dab14e8ff9b511533272bbd3a
-  data.tar.gz: 2626ad66e9db0b6f910b0ea879464216da51a21cc6c31b5218746fdd84fd5fccbd3c350f60a0224cbdc833ee47cd4f64b5624b9e63aee18a73e3dda389ab0400
+  metadata.gz: 6d56824ba5b7d0c13bca6b31e4dac90a1859ec35c3c50478b90a4f67aae2cd7e7efcfb53dc29ddfcae9f4839695610ea5602e0f29b2ddd53c64a00b34562806d
+  data.tar.gz: efe21d27318e44196ecd0024663a143ba577ab8b2ca0a2b9e085263d4be3d7f472c22c68c5442d802c58717306a575d320325c4d9d8bb3d5f8b5e48fb444c992

data/app/assets/tailwind/flowbite_components/engine.css

@@ -0,0 +1,2 @@
+/* Make sure Tailwind doens't prune our classes away */
+@source "../../../components"

data/app/components/flowbite/button/outline.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Button
+    class Outline < Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-700", "hover:text-white", "border", "border-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:outline-none", "focus:ring-blue-300", "font-medium", "rounded-lg", "text-center", "me-2", "mb-2", "dark:border-blue-500", "dark:text-blue-500", "dark:hover:text-white", "dark:hover:bg-blue-500", "dark:focus:ring-blue-800"]
+            ),
+            green: Flowbite::Style.new(
+              default: ["text-green-700", "hover:text-white", "border", "border-green-700", "hover:bg-green-800", "focus:ring-4", "focus:outline-none", "focus:ring-green-300", "font-medium", "rounded-lg", "text-center", "me-2", "mb-2", "dark:border-green-500", "dark:text-green-500", "dark:hover:text-white", "dark:hover:bg-green-600", "dark:focus:ring-green-800"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength
+      end
+    end
+  end
+end

data/app/components/flowbite/button/pill.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Button
+    class Pill < Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength, Metrics/MethodLength
+        def styles
+          {
+            alternative: Flowbite::Style.new(
+              default: ["text-sm", "font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-full", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+            ),
+            dark: Flowbite::Style.new(
+              default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:outline-none", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+            ),
+            default: Flowbite::Style.new(
+              default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-center", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800"]
+            ),
+            green: Flowbite::Style.new(
+              default: ["text-white", "bg-green-700", "hover:bg-green-800", "focus:outline-none", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-full", "text-center", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+            ),
+            light: Flowbite::Style.new(
+              default: ["text-gray-900", "bg-white", "border", "border-gray-300", "focus:outline-none", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-full", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+            ),
+            purple: Flowbite::Style.new(
+              default: ["text-white", "bg-purple-700", "hover:bg-purple-800", "focus:outline-none", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-full", "text-center", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+            ),
+            red: Flowbite::Style.new(
+              default: ["text-white", "bg-red-700", "hover:bg-red-800", "focus:outline-none", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-full", "text-center", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+            ),
+            yellow: Flowbite::Style.new(
+              default: ["text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:outline-none", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-full", "text-center", "dark:focus:ring-yellow-900"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength, Metrics/MethodLength
+      end
+    end
+  end
+end

data/app/components/flowbite/button.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a HTML button element.
+  #
+  # See https://flowbite.com/docs/components/buttons/
+  #
+  # @param label [String] The text to display on the button.
+  #
+  # All other parameters are optional and are passed directly to the button tag
+  # as HTML attributes.
+  class Button < ViewComponent::Base
+    SIZES = {
+      xs: ["text-xs", "px-3", "py-2"],
+      sm: ["text-sm", "px-3", "py-2"],
+      default: ["text-sm", "px-5", "py-2.5"],
+      lg: ["text-base", "px-5", "py-3"],
+      xl: ["text-base", "px-6", "py-3.5"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, state: :default, style: :default)
+        style = styles.fetch(style)
+        classes = style.fetch(state)
+        classes + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          alternative: Flowbite::Style.new(
+            default: ["font-medium", "text-gray-900", "focus:outline-none", "bg-white", "rounded-lg", "border", "border-gray-200", "hover:bg-gray-100", "hover:text-blue-700", "focus:z-10", "focus:ring-4", "focus:ring-gray-100", "dark:focus:ring-gray-700", "dark:bg-gray-800", "dark:text-gray-400", "dark:border-gray-600", "dark:hover:text-white", "dark:hover:bg-gray-700"]
+          ),
+          dark: Flowbite::Style.new(
+            default: ["text-white", "bg-gray-800", "hover:bg-gray-900", "focus:ring-4", "focus:ring-gray-300", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:hover:bg-gray-700", "dark:focus:ring-gray-700", "dark:border-gray-700"]
+          ),
+          default: Flowbite::Style.new(
+            default: ["text-white", "bg-blue-700", "hover:bg-blue-800", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-lg", "dark:bg-blue-600", "dark:hover:bg-blue-700", "focus:outline-none", "dark:focus:ring-blue-800"]
+          ),
+          green: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-green-700", "hover:bg-green-800", "focus:ring-4", "focus:ring-green-300", "font-medium", "rounded-lg", "dark:bg-green-600", "dark:hover:bg-green-700", "dark:focus:ring-green-800"]
+          ),
+          light: Flowbite::Style.new(
+            default: ["text-gray-900", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "focus:ring-4", "focus:ring-gray-100", "font-medium", "rounded-lg", "dark:bg-gray-800", "dark:text-white", "dark:border-gray-600", "dark:hover:bg-gray-700", "dark:hover:border-gray-600", "dark:focus:ring-gray-700"]
+          ),
+          purple: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-purple-700", "hover:bg-purple-800", "focus:ring-4", "focus:ring-purple-300", "font-medium", "rounded-lg", "dark:bg-purple-600", "dark:hover:bg-purple-700", "dark:focus:ring-purple-900"]
+          ),
+          red: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-red-700", "hover:bg-red-800", "focus:ring-4", "focus:ring-red-300", "font-medium", "rounded-lg", "dark:bg-red-600", "dark:hover:bg-red-700", "dark:focus:ring-red-900"]
+          ),
+          yellow: Flowbite::Style.new(
+            default: ["focus:outline-none", "text-white", "bg-yellow-400", "hover:bg-yellow-500", "focus:ring-4", "focus:ring-yellow-300", "font-medium", "rounded-lg", "dark:focus:ring-yellow-900"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    attr_reader :button_attributes, :size, :style
+
+    def initialize(size: :default, style: :default, **button_attributes)
+      @size = size
+      @style = style
+      @button_attributes = button_attributes
+    end
+
+    def call
+      content_tag(
+        :button,
+        content,
+        **options
+      )
+    end
+
+    private
+
+    def classes
+      self.class.classes(size: size, state: :default, style: style)
+    end
+
+    def options
+      {
+        class: classes
+      }.merge(button_attributes)
+    end
+  end
+end

data/app/components/flowbite/card.rb

@@ -0,0 +1,43 @@
+module Flowbite
+  # Renders a card element.
+  #
+  # See https://flowbite.com/docs/components/cards/
+  class Card < ViewComponent::Base
+    class << self
+      def classes(state: :default, style: :default)
+        style = styles.fetch(style)
+        style.fetch(state)
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          default: Flowbite::Style.new(
+            default: ["p-6", "bg-white", "border", "border-gray-200", "rounded-lg", "shadow-sm", "dark:bg-gray-800", "dark:border-gray-700"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    def call
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+
+      content_tag(:div, card_options.merge(@options)) do
+        concat(content_tag(:div, content, class: "font-normal text-gray-700 dark:text-gray-400"))
+      end
+    end
+
+    # @param class [Array<String>] Additional CSS classes for the card
+    #   container.
+    #
+    # @param options [Hash] Additional HTML options for the card container
+    #   (e.g., custom classes, data attributes). These options are merged into
+    #   the card's root element.
+    def initialize(class: [], options: {})
+      @class = Array(binding.local_variable_get(:class)) || []
+      @options = options || {}
+    end
+  end
+end

data/app/components/flowbite/input/checkbox.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # The checkbox component can be used to receive one or more selected options
+    # from the user in the form of a square box available in multiple styles,
+    # sizes, colors, and variants coded with the utility classes from Tailwind
+    # CSS and with support for dark mode.
+    #
+    # https://flowbite.com/docs/forms/checkbox/
+    class Checkbox < Field
+      class << self
+        # Checkboxes only have their default size.
+        def sizes
+          {
+            default: ["w-4", "h-4"]
+          }
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "rounded-sm", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "rounded-sm", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      def input_field_type
+        :check_box
+      end
+    end
+  end
+end

data/app/components/flowbite/input/date.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Date < Field
+      def input_field_type
+        :date_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/email.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Email < Field
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :email_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/field.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # The indivdual input component for use in forms without labels or error
+    # messages.
+    #
+    # Use this when you want to render an input field on its own without any
+    # surrounding elements, ie as a building block in more complex input
+    # components.
+    #
+    # To render a complete input field with labels and error messages, use
+    # `Flowbite::InputField` instead.
+    class Field < ViewComponent::Base
+      SIZES = {
+        sm: ["p-2", "text-xs"],
+        default: ["p-2.5", "text-sm"],
+        lg: ["p-4", "text-base"]
+      }.freeze
+
+      STATES = [
+        DEFAULT = :default,
+        DISABLED = :disabled,
+        ERROR = :error
+      ].freeze
+
+      attr_reader :options, :size, :style
+
+      class << self
+        def classes(size: :default, state: :default, style: :default)
+          style = styles.fetch(style)
+          state_classes = style.fetch(state)
+          state_classes + sizes.fetch(size)
+        end
+
+        # Returns the sizes this Field supports.
+        #
+        # This is effectively the SIZES constant, but provided as a method to
+        # return the constant from the current class, not the superclass.
+        #
+        # @return [Hash] A hash mapping size names to their corresponding CSS
+        # classes.
+        def sizes
+          const_get(:SIZES)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["bg-gray-50", "border", "border-gray-300", "text-gray-900", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-white", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
+              disabled: ["bg-gray-100", "border", "border-gray-300", "text-gray-900", "text-sm", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "p-2.5", "cursor-not-allowed", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-gray-400", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
+              error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
+            )
+          }.freeze
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
+        @attribute = attribute
+        @disabled = disabled
+        @form = form
+        @options = options || {}
+        @object = form.object
+        @size = size
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          **input_options
+        )
+      end
+
+      # Returns the CSS classes to apply to the input field
+      def classes
+        self.class.classes(size: size, state: state)
+      end
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :text_field
+      end
+
+      protected
+
+      # Returns true if the field is disabled
+      def disabled?
+        !!@disabled
+      end
+
+      def errors?
+        @object.errors.include?(@attribute.intern)
+      end
+
+      private
+
+      # Returns the options argument for the input field
+      def input_options
+        {
+          class: classes,
+          disabled: disabled?
+        }.merge(options)
+      end
+
+      def state
+        return DISABLED if disabled?
+        return ERROR if errors?
+
+        DEFAULT
+      end
+    end
+  end
+end

data/app/components/flowbite/input/file.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class File < Field
+      SIZES = {
+        sm: ["text-xs"],
+        default: ["text-sm"],
+        lg: ["text-lg"]
+      }.freeze
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :file_field
+      end
+
+      # rubocop:disable Layout/LineLength
+      def self.styles
+        {
+          default: Flowbite::Style.new(
+            default: ["block", "w-full", "text-gray-900", "border", "border-gray-300", "rounded-lg", "cursor-pointer", "bg-gray-50", "focus:outline-none", "dark:text-gray-400", "dark:bg-gray-700", "dark:border-gray-600"],
+            disabled: ["block", "w-full", "text-gray-400", "border", "border-gray-300", "rounded-lg", "cursor-not-allowed", "bg-gray-100", "dark:text-gray-500", "dark:bg-gray-600", "dark:border-gray-500"],
+            error: ["block", "w-full", "text-red-900", "border", "border-red-500", "rounded-lg", "cursor-pointer", "bg-red-50", "focus:outline-none", "dark:text-red-400", "dark:bg-gray-700", "dark:border-red-500"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+  end
+end

data/app/components/flowbite/input/hint.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Hint < ViewComponent::Base
+      STATES = [
+        DEFAULT = :default
+      ].freeze
+
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["mt-2", "text-sm", "text-gray-500", "dark:text-gray-400"]
+            )
+          }.freeze
+        end
+      end
+
+      def call
+        tag.p(
+          content,
+          class: classes,
+          **@options
+        )
+      end
+
+      def initialize(attribute:, form:, options: {})
+        @attribute = attribute
+        @form = form
+        @options = options
+        @object = form.object
+      end
+
+      # Returns an array with the CSS classes to apply to the label element
+      def classes
+        self.class.classes(state: state)
+      end
+
+      protected
+
+      # Returns the state of the label.
+      #
+      # See the STATES constant for valid values.
+      #
+      # @return [Symbol] the state of the label
+      def state
+        DEFAULT
+      end
+    end
+  end
+end

data/app/components/flowbite/input/label.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
+    class Label < ViewComponent::Base
+      STATES = [
+        DEFAULT = :default,
+        DISABLED = :disabled,
+        ERROR = :error
+      ].freeze
+
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["block", "mb-2", "text-sm", "font-medium", "text-gray-900", "dark:text-white"],
+              disabled: ["block", "mb-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"],
+              error: ["block", "mb-2", "text-sm", "font-medium", "text-red-700", "dark:text-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      def call
+        if content?
+          @form.label(@attribute, content, **options)
+        else
+          @form.label(@attribute, **options)
+        end
+      end
+
+      def errors?
+        @object.errors.include?(@attribute.intern)
+      end
+
+      def initialize(attribute:, form:, disabled: false, options: {})
+        @attribute = attribute
+        @disabled = disabled
+        @form = form
+        @object = form.object
+        @options = options
+      end
+
+      # Returns an array with the CSS classes to apply to the label element
+      def classes
+        self.class.classes(state: state)
+      end
+
+      protected
+
+      def disabled?
+        !!@disabled
+      end
+
+      # Returns the state of the label.
+      #
+      # See the STATES constant for valid values.
+      #
+      # @return [Symbol] the state of the label
+      def state
+        return DISABLED if disabled?
+        return ERROR if errors?
+
+        DEFAULT
+      end
+
+      private
+
+      def options
+        {
+          class: classes
+        }.merge(@options)
+      end
+    end
+  end
+end

data/app/components/flowbite/input/number.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Number < Field
+      def input_field_type
+        :number_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/password.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Password < Field
+      def input_field_type
+        :password_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/phone.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Phone < Field
+      def input_field_type
+        :phone_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/radio_button.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # The radio button component can be used to allow the user to choose a
+    # single option from one or more available options.
+    #
+    # https://flowbite.com/docs/forms/radio/
+    class RadioButton < Field
+      class << self
+        # Radio buttons only have their default size.
+        def sizes
+          {
+            default: ["w-4", "h-4"]
+          }
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          @value,
+          **input_options
+        )
+      end
+
+      def initialize(attribute:, form:, value:, disabled: false, options: {})
+        super(attribute: attribute, disabled: disabled, form: form, options: options)
+        @value = value
+      end
+
+      def input_field_type
+        :radio_button
+      end
+    end
+  end
+end