flowbite-components 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8801080d6b51d7c4fef754dcd189ebaea34c8dd17a496c7dda80eb31e37f9737
-  data.tar.gz: a50284e6b62c7713edbaadec851d34ec87ad698986431ca407539c9282033928
+  metadata.gz: afc7f639fa9f28b2310d7f68cd3d8939e3eaa526ba80ee028c471664597e4581
+  data.tar.gz: 1b4e73f0bd471b9b3d36db8aba2e614e28f5573cbf7fd214de360a985767eade
 SHA512:
-  metadata.gz: 894c82db7d448e8a444e4fb3df781e0ccea35df068ae5711d358e83d3651dfc30e2b086e55dcfd8afabd5d84db5f777b1dd0fc497382cab1531f0dcf6623ab3f
-  data.tar.gz: cd0bb587980b19ff4d4b6ec9f6cfad3d3ec42a624a87f2a88f28eafd77608956a3cd2d3de6135c1b118ab0f85505a8c390dc0e6be53a548ef794e0aeb3bb228e
+  metadata.gz: 6d56824ba5b7d0c13bca6b31e4dac90a1859ec35c3c50478b90a4f67aae2cd7e7efcfb53dc29ddfcae9f4839695610ea5602e0f29b2ddd53c64a00b34562806d
+  data.tar.gz: efe21d27318e44196ecd0024663a143ba577ab8b2ca0a2b9e085263d4be3d7f472c22c68c5442d802c58717306a575d320325c4d9d8bb3d5f8b5e48fb444c992

data/CHANGELOG.md

@@ -10,6 +10,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Button component (first component, wee!)
 * Input components
 * InputField components
+* Basic Card component
 
 ### Changes
 

data/README.md

@@ -1,11 +1,11 @@
-# Flowbite ViewComponents
+# Flowbite Components
 
-[![Gem Version](https://badge.fury.io/rb/flowbite-view_components.svg)](https://rubygems.org/gems/flowbite-view_components)
-[![Ruby Tests](https://github.com/substancelab/flowbite-view_components/workflows/Ruby/badge.svg)](https://github.com/substancelab/flowbite-view_components/actions)
+[![Gem Version](https://badge.fury.io/rb/flowbite-components.svg)](https://rubygems.org/gems/flowbite-components)
+[![Ruby Tests](https://github.com/substancelab/flowbite-components/workflows/Ruby/badge.svg)](https://github.com/substancelab/flowbite-components/actions)
 
 Unofficial, open source implementation of [Flowbite](https://flowbite.com/) components for Rails applications, built using [ViewComponent](https://viewcomponent.org/).
 
-Flowbite ViewComponents provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.
+Flowbite Components provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.
 
 ## Features
 
@@ -22,7 +22,7 @@ Flowbite ViewComponents provides a comprehensive library of UI components follow
 Add the gem to your application's Gemfile:
 
 ```ruby
-gem 'flowbite-view_components'
+gem 'flowbite-components'
 ```
 
 Then execute:
@@ -52,7 +52,7 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ```css
 @import "flowbite/src/themes/default";
 @plugin "flowbite/plugin";
-@import "../builds/tailwind/flowbite_view_components";
+@import "../builds/tailwind/flowbite_components";
 ```
 
 ## Usage examples
@@ -147,6 +147,33 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ) %>
 ```
 
+## How to customize components
+
+### Add specific CSS classes
+
+A common use case for customizing a component is to add more CSS classes when
+rendering it, fx to change the size or spacing. flowbite-components is optimized
+for this case and all you need to do is specify the extra classes:
+
+```erb
+<%= render(Flowbite::Card.new(class: "w-full my-8")) { "Content" } %>
+```
+renders
+```html
+<div class="... all the usual classes... w-full my-8">
+```
+
+If you want to fully replace the existing classes, you can pass an entirely new
+`class` attribute via options:
+
+```erb
+<%= render(Flowbite::Card.new(options: {class: "w-full my-8"})) { "Content" } %>
+```
+renders
+```html
+<div class="w-full my-8">
+```
+
 ## Available Components
 
 ### Form Components
@@ -223,7 +250,7 @@ This library includes Lookbook previews for all components. To view them:
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at [https://github.com/substancelab/flowbite-view_components](https://github.com/substancelab/flowbite-view_components).
+Bug reports and pull requests are welcome on GitHub at [https://github.com/substancelab/flowbite-components](https://github.com/substancelab/flowbite-components).
 
 ### Development Guidelines
 

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