flowbite-components 0.1.1 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2f32fb05b632e935c29d9f6a9a62fafa1d29ee13f80b9edf28040067a2a4fa54
-  data.tar.gz: 59eda6515de3eba70480afc5cea58687eaddaa453f8db7949ab5ae2f67288862
+  metadata.gz: 2641783b14422d1a71ae1bc126308ce749e54ab33971baa9f2c590e7368a3d18
+  data.tar.gz: 919b625a46a74adafea39e617906d3da0c79f44876aaaba80c202fbae6ad9f0a
 SHA512:
-  metadata.gz: 1e00a5308ab23bc68e6946fb6c068f01e91773c6dc3b37454fb5057d9b35268303001ba6135a4c77d746006dea9ebafa8962e34dab14e8ff9b511533272bbd3a
-  data.tar.gz: 2626ad66e9db0b6f910b0ea879464216da51a21cc6c31b5218746fdd84fd5fccbd3c350f60a0224cbdc833ee47cd4f64b5624b9e63aee18a73e3dda389ab0400
+  metadata.gz: 436530353e5ae17c78af2a1d84a3125677d4fbc23a66191ff3b355f205a65307ddbc908d5c53dccef5806bd4151d6f6842f5e53f2079290179b37b96585940d5
+  data.tar.gz: 9031664132054b141c7937dfa0794cde6924c86907d0b3c544364f101b1937de5700f86cf89f6350bb159769be35095e3f3cf59572521052941b0f1f4f922155

data/CHANGELOG.md

@@ -7,15 +7,30 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
-* Button component (first component, wee!)
-* Input components
-* InputField components
-* Basic Card component
+*
 
-### Changes
+### Changed
 
 *
 
 ### Removed
 
 *
+
+
+## [0.1.3]
+
+### Added
+
+* Options to Flowbite::InputField::Checkbox and Flowbite::Input::Checkbox that allow you to change the submitted value.
+* Options added for Flowbite::Input::Select - :multiple and :include_blank. These can now be passed to either the input itself or Flowbite::InputField::Select
+
+
+## [0.1.2]
+
+### Added
+
+* Button component (first component, wee!)
+* Input components
+* InputField components
+* Basic Card component

data/README.md

@@ -242,11 +242,12 @@ bundle exec rake install
 
 ### Component Previews
 
-This library includes Lookbook previews for all components. To view them:
+This library includes a demo application with previews for all components. To view them:
 
-1. Add Lookbook to your development dependencies
-2. Run `rails server`
-3. Visit `/rails/lookbook`
+1. cd demo
+2. Run `bundle && npm install`
+3. Run `rails server`
+4. Visit `http://localhost:3000/rails/lookbook`
 
 ## Contributing
 

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,45 @@
+# frozen_string_literal: true
+
+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,73 @@
+# 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
+      DEFAULT_CHECKED_VALUE = "1"
+      DEFAULT_UNCHECKED_VALUE = "0"
+
+      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
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          input_options,
+          checked_value,
+          unchecked_value
+        )
+      end
+
+      def initialize(attribute:, form:, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
+        super(attribute: attribute, form: form, disabled: disabled, options: options, size: size)
+        @unchecked_value = unchecked_value
+        @value = value
+      end
+
+      def input_field_type
+        :check_box
+      end
+
+      # Returns the options argument for the input field
+      def input_options
+        {
+          class: classes,
+          disabled: disabled?
+        }.merge(options)
+      end
+
+      private
+
+      def checked_value
+        @value
+      end
+
+      attr_reader :unchecked_value
+    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