flowbite-components 0.1.2 → 0.1.4

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

@@ -13,9 +13,9 @@ module Flowbite
     # `Flowbite::InputField` instead.
     class Field < ViewComponent::Base
       SIZES = {
-        sm: ["p-2", "text-xs"],
-        default: ["p-2.5", "text-sm"],
-        lg: ["p-4", "text-base"]
+        sm: ["px-2.5", "py-2", "text-sm"],
+        default: ["px-3", "py-2.5", "text-sm"],
+        lg: ["px-3.5", "py-3", "text-base"]
       }.freeze
 
       STATES = [
@@ -46,19 +46,22 @@ module Flowbite
 
         # 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
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
+                disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
+                error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
+              }
+            }.freeze
+          )
         end
         # rubocop:enable Layout/LineLength
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @options = options || {}
@@ -77,7 +80,7 @@ module Flowbite
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field
@@ -92,7 +95,13 @@ module Flowbite
         !!@disabled
       end
 
+      # Returns true if the object has errors. Returns false if there is no
+      # object.
+      #
+      # @return [Boolean] true if there are errors, false otherwise.
       def errors?
+        return false unless @object
+
         @object.errors.include?(@attribute.intern)
       end
 

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

@@ -4,9 +4,9 @@ module Flowbite
   module Input
     class File < Field
       SIZES = {
-        sm: ["text-xs"],
+        sm: ["text-sm"],
         default: ["text-sm"],
-        lg: ["text-lg"]
+        lg: ["text-base"]
       }.freeze
 
       # Returns the name of the method used to generate HTML for the input field
@@ -16,13 +16,15 @@ module Flowbite
 
       # 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
+        Flowbite::Styles.from_hash(
+          {
+            default: {
+              default: ["block", "w-full", "text-heading", "border", "border-default-medium", "rounded-base", "cursor-pointer", "bg-neutral-secondary-medium", "focus:outline-none"],
+              disabled: ["block", "w-full", "text-fg-disabled", "border", "border-default-medium", "rounded-base", "cursor-not-allowed", "bg-neutral-secondary-medium"],
+              error: ["block", "w-full", "text-fg-danger-strong", "border", "border-danger-subtle", "rounded-base", "cursor-pointer", "bg-danger-soft", "focus:outline-none"]
+            }
+          }.freeze
+        )
       end
       # rubocop:enable Layout/LineLength
     end

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

@@ -14,11 +14,13 @@ module Flowbite
         end
 
         def styles
-          {
-            default: Flowbite::Style.new(
-              default: ["mt-2", "text-sm", "text-gray-500", "dark:text-gray-400"]
-            )
-          }.freeze
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["mt-2.5", "text-sm", "text-body"]
+              }
+            }.freeze
+          )
         end
       end
 
@@ -30,8 +32,9 @@ module Flowbite
         )
       end
 
-      def initialize(attribute:, form:, options: {})
+      def initialize(attribute:, form:, class: nil, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @form = form
         @options = options
         @object = form.object
@@ -39,7 +42,7 @@ module Flowbite
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

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

@@ -17,13 +17,15 @@ module Flowbite
         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
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["block", "mb-2.5", "text-sm", "font-medium", "text-heading"],
+                disabled: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-disabled"],
+                error: ["block", "mb-2.5", "text-sm", "font-medium", "text-fg-danger-strong"]
+              }
+            }.freeze
+          )
         end
       end
 
@@ -36,11 +38,14 @@ module Flowbite
       end
 
       def errors?
+        return false unless @object
+
         @object.errors.include?(@attribute.intern)
       end
 
-      def initialize(attribute:, form:, disabled: false, options: {})
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {})
         @attribute = attribute
+        @class = Array.wrap(binding.local_variable_get(:class))
         @disabled = disabled
         @form = form
         @object = form.object
@@ -49,7 +54,7 @@ module Flowbite
 
       # Returns an array with the CSS classes to apply to the label element
       def classes
-        self.class.classes(state: state)
+        self.class.classes(state: state) + @class
       end
 
       protected

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

@@ -17,13 +17,15 @@ module Flowbite
 
         # 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
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2"],
+                disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
+                error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "focus:ring-danger", "focus:ring-2"]
+              }
+            }.freeze
+          )
         end
       end
 
@@ -37,8 +39,8 @@ module Flowbite
         )
       end
 
-      def initialize(attribute:, form:, value:, disabled: false, options: {})
-        super(attribute: attribute, disabled: disabled, form: form, options: options)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, form: form, options: options)
         @value = value
       end
 

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

@@ -9,14 +9,16 @@ module Flowbite
     # Wraps `ActionView::Helpers::FormOptionsHelper#select`: https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
     class Select < Field
       SIZES = {
-        sm: ["p-2", "text-xs"],
-        default: ["p-2.5", "text-sm"],
-        lg: ["px-4", "py-3", "text-base"]
+        sm: ["px-2.5", "py-2", "text-sm"],
+        default: ["px-3", "py-2.5", "text-sm"],
+        lg: ["px-3.5", "py-3", "text-base"]
       }.freeze
 
-      def initialize(form:, attribute:, collection: [], disabled: false, options: {}, size: :default)
-        super(form: form, attribute: attribute, disabled: disabled, options: options, size: size)
+      def initialize(form:, attribute:, class: nil, collection: [], disabled: false, include_blank: false, multiple: false, options: {}, size: :default)
+        super(form: form, attribute: attribute, class: binding.local_variable_get(:class), disabled: disabled, options: options, size: size)
         @collection = collection
+        @include_blank = include_blank
+        @multiple = multiple
       end
 
       # Returns the HTML to use for the actual input field element.
@@ -25,7 +27,7 @@ module Flowbite
           input_field_type,
           @attribute,
           @collection,
-          {},
+          select_options,
           html_options
         )
       end
@@ -37,6 +39,13 @@ module Flowbite
 
       private
 
+      def select_options
+        {
+          include_blank: @include_blank,
+          multiple: @multiple
+        }
+      end
+
       # Returns the html_options argument for the select method
       def html_options
         {

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

@@ -6,16 +6,18 @@ module Flowbite
       class << self
         # rubocop:disable Layout/LineLength
         def styles
-          {
-            default: Flowbite::Style.new(
-              default: ["block", "w-full", "text-gray-900", "bg-gray-50", "rounded-lg", "border", "border-gray-300", "focus:ring-blue-500", "focus:border-blue-500", "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: ["block", "w-full", "bg-gray-100", "rounded-lg", "border", "border-gray-300", "text-gray-900", "cursor-not-allowed"],
-              error: ["block", "w-full", "bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "focus:border-red-500", "dark:bg-gray-700", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
-            )
-          }.freeze
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["block", "w-full", "text-heading", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "focus:ring-brand", "focus:border-brand", "shadow-xs", "placeholder:text-body"],
+                disabled: ["block", "w-full", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "text-fg-disabled", "cursor-not-allowed", "shadow-xs", "placeholder:text-fg-disabled"],
+                error: ["block", "w-full", "bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "placeholder:text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "shadow-xs"]
+              }
+            }.freeze
+          )
         end
-        # rubocop:enable Layout/LineLength
       end
+      # rubocop:enable Layout/LineLength
 
       # Returns the HTML to use for the actual input field element.
       def call
@@ -30,7 +32,7 @@ module Flowbite
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field

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

@@ -3,8 +3,38 @@
 module Flowbite
   module Input
     class ValidationError < ViewComponent::Base
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["mt-2", "text-sm", "text-red-600", "dark:text-red-500"]
+              }
+            }.freeze
+          )
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
       def call
-        tag.p(content, class: "mt-2 text-sm text-red-600 dark:text-red-500")
+        tag.p(content, class: classes)
+      end
+
+      def initialize(class: nil)
+        @class = Array.wrap(binding.local_variable_get(:class))
+      end
+
+      protected
+
+      # Returns the CSS classes to apply to the validation error
+      def classes
+        self.class.classes + @class
       end
     end
   end

data/app/components/flowbite/input_field/checkbox.html.erb

@@ -1,7 +1,5 @@
-<div class="flex">
-  <div class="flex items-center h-5">
-      <%= input %>
-  </div>
+<div class="<%= classes.join(" ") %>">
+  <div class="flex items-center h-5"><%= input %></div>
 
   <div class="ms-2 text-sm">
     <%= label %>

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

@@ -5,12 +5,10 @@ module Flowbite
     class Checkbox < InputField
       protected
 
-      def input_component
-        ::Flowbite::Input::Checkbox
+      def default_container_classes
+        ["flex"]
       end
 
-      protected
-
       def default_hint_options
         return {} unless @hint
 
@@ -27,21 +25,32 @@ module Flowbite
         options
       end
 
+      def input_component
+        ::Flowbite::Input::Checkbox
+      end
+
       private
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
+      def input_arguments
+        args = super
+        args[:unchecked_value] = @input[:unchecked_value] if @input.key?(:unchecked_value)
+        args[:value] = @input[:value] if @input.key?(:value)
+        args
+      end
+
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

data/app/components/flowbite/input_field/input_field.html.erb

@@ -1,4 +1,4 @@
-<div>
+<div class="<%= classes.join(" ") %>">
   <%= label %>
   <%= input %>
   <%= hint %>

data/app/components/flowbite/input_field/radio_button.html.erb

@@ -1,7 +1,5 @@
-<div class="flex">
-  <div class="flex items-center h-5">
-      <%= input %>
-  </div>
+<div class="<%= classes.join(" ") %>">
+  <div class="flex items-center h-5"><%= input %></div>
 
   <div class="ms-2 text-sm">
     <%= label %>

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

@@ -3,19 +3,17 @@
 module Flowbite
   class InputField
     class RadioButton < InputField
-      protected
-
-      def initialize(attribute:, form:, value:, disabled: false, hint: nil, input: {}, label: {})
-        super(attribute: attribute, form: form, disabled: disabled, hint: hint, input: input, label: label)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, hint: hint, input: input, label: label, options: options)
         @value = value
       end
 
-      def input_component
-        ::Flowbite::Input::RadioButton
-      end
-
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_input
         args = {
           attribute: @attribute,
@@ -54,13 +52,17 @@ module Flowbite
         render(component)
       end
 
+      def input_component
+        ::Flowbite::Input::RadioButton
+      end
+
       private
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -78,9 +80,9 @@ module Flowbite
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

data/app/components/flowbite/input_field/select.rb

@@ -3,9 +3,11 @@
 module Flowbite
   class InputField
     class Select < InputField
-      def initialize(attribute:, form:, collection: [], disabled: false, hint: nil, input: {}, label: {}, size: :default)
+      def initialize(attribute:, form:, collection: [], disabled: false, hint: nil, include_blank: false, input: {}, label: {}, multiple: false, size: :default)
         super(attribute: attribute, disabled: disabled, form: form, hint: hint, input: input, label: label, size: size)
         @collection = collection
+        @include_blank = include_blank
+        @multiple = multiple
       end
 
       def input
@@ -15,6 +17,8 @@ module Flowbite
             collection: @collection,
             disabled: @disabled,
             form: @form,
+            include_blank: @include_blank,
+            multiple: @multiple,
             options: input_options,
             size: @size
           )

data/app/components/flowbite/input_field.rb

@@ -67,18 +67,24 @@ module Flowbite
     renders_one :label
 
     # Returns the errors for attribute
+    #
+    # @return [Array<String>] An array of error messages for the attribute.
     def errors
+      return [] unless @object
+
       @object.errors[@attribute] || []
     end
 
-    def initialize(attribute:, form:, disabled: false, hint: nil, input: {}, label: {}, size: :default)
+    def initialize(attribute:, form:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {}, size: :default)
       @attribute = attribute
+      @class = Array.wrap(binding.local_variable_get(:class))
       @disabled = disabled
       @form = form
       @hint = hint
       @input = input
       @label = label
       @object = form.object
+      @options = options || {}
       @size = size
     end
 
@@ -88,6 +94,18 @@ module Flowbite
 
     protected
 
+    def classes
+      if @options[:class]
+        Array.wrap(@options[:class])
+      else
+        [default_container_classes, @class].flatten.compact
+      end
+    end
+
+    def default_container_classes
+      []
+    end
+
     # Returns the HTML to use for the hint element if any
     def default_hint
       return unless hint?
@@ -134,13 +152,7 @@ module Flowbite
 
     # Returns the HTML to use for the default input element.
     def default_input
-      render(input_component.new(
-        form: @form,
-        attribute: @attribute,
-        disabled: @disabled,
-        options: input_options,
-        size: @size
-      ))
+      render(input_component.new(**input_arguments))
     end
 
     def default_label
@@ -177,7 +189,24 @@ module Flowbite
     end
 
     def id_for_hint_element
-      "#{@form.object_name}_#{@attribute}_hint"
+      [
+        @form.object_name,
+        @attribute,
+        "hint"
+      ]
+        .compact_blank
+        .join("_")
+    end
+
+    # @return [Hash] The keyword arguments for the input component.
+    def input_arguments
+      {
+        attribute: @attribute,
+        disabled: @disabled,
+        form: @form,
+        options: input_options,
+        size: @size
+      }
     end
 
     def input_options

data/app/components/flowbite/link.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # The link component can be used to set hyperlinks from one page to another or
+  # to an external website when clicking on an inline text item, button, or card
+  #
+  # Use this component to add default styles to an inline link element.
+  class Link < ViewComponent::Base
+    attr_reader :href, :options
+
+    class << self
+      def classes
+        ["font-medium", "text-fg-brand", "hover:underline"]
+      end
+    end
+
+    # Initialize the Link component.
+    #
+    # @param href What to link to. This can be a String or anything else that
+    # `link_to` supports. See `ActionView::Helpers::UrlHelper#link_to` for more
+    # details.
+    #
+    # @param options [Hash] Additional HTML options for the link element
+    def initialize(href:, class: nil, **options)
+      super()
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @href = href
+      @options = options
+    end
+
+    def call
+      link_to(content, href, {class: classes}.merge(options))
+    end
+
+    private
+
+    def classes
+      self.class.classes + @class
+    end
+  end
+end