flowbite-components 0.1.3 → 0.2.0

data/app/components/flowbite/button.rb

@@ -1,19 +1,20 @@
 # 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.
+  # Renders a HTML button element. See https://flowbite.com/docs/components/buttons/
   #
   # All other parameters are optional and are passed directly to the button tag
   # as HTML attributes.
+  #
+  # @example Basic usage
+  #  <%= render Flowbite::Button.new { "Click me" } %>
+  #
+  # @lookbook_embed ButtonPreview
   class Button < ViewComponent::Base
     SIZES = {
-      xs: ["text-xs", "px-3", "py-2"],
+      xs: ["text-xs", "px-3", "py-1.5"],
       sm: ["text-sm", "px-3", "py-2"],
-      default: ["text-sm", "px-5", "py-2.5"],
+      default: ["text-sm", "px-4", "py-2.5"],
       lg: ["text-base", "px-5", "py-3"],
       xl: ["text-base", "px-6", "py-3.5"]
     }.freeze
@@ -31,39 +32,42 @@ module Flowbite
 
       # 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
+        Flowbite::Styles.from_hash(
+          {
+            danger: {
+              default: ["focus:outline-none", "text-white", "bg-danger", "box-border", "border", "border-transparent", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            dark: {
+              default: ["focus:outline-none", "text-white", "bg-dark", "box-border", "border", "border-transparent", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            default: {
+              default: ["focus:outline-none", "text-white", "bg-brand", "box-border", "border", "border-transparent", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            ghost: {
+              default: ["focus:outline-none", "text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded-base"]
+            },
+            secondary: {
+              default: ["focus:outline-none", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            success: {
+              default: ["focus:outline-none", "text-white", "bg-success", "box-border", "border", "border-transparent", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            tertiary: {
+              default: ["focus:outline-none", "text-body", "bg-neutral-primary-soft", "box-border", "border", "border-default", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary-soft", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            },
+            warning: {
+              default: ["focus:outline-none", "text-white", "bg-warning", "box-border", "border", "border-transparent", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base"]
+            }
+          }.freeze
+        )
       end
       # rubocop:enable Layout/LineLength
     end
 
     attr_reader :button_attributes, :size, :style
 
-    def initialize(size: :default, style: :default, **button_attributes)
+    def initialize(class: nil, size: :default, style: :default, **button_attributes)
+      @class = Array.wrap(binding.local_variable_get(:class))
       @size = size
       @style = style
       @button_attributes = button_attributes
@@ -80,7 +84,7 @@ module Flowbite
     private
 
     def classes
-      self.class.classes(size: size, state: :default, style: style)
+      self.class.classes(size: size, state: :default, style: style) + @class
     end
 
     def options

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

@@ -0,0 +1,7 @@
+<%= content_tag(:div, card_options) do %>
+  <%= title %>
+
+  <% if content.present? %>
+    <div class="font-normal text-body"><%= content %></div>
+  <% end %>
+<% end %>

data/app/components/flowbite/card/title.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Card
+    # Renders the title of a card element.
+    class Title < 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: ["mb-2", "text-2xl", "font-semibold", "tracking-tight", "text-heading"]
+              }
+            }.freeze
+          )
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      def call
+        title_options = {
+          class: self.class.classes
+        }.merge(@options)
+
+        content_tag(:h5, content, **title_options)
+      end
+
+      def initialize(**options)
+        @options = options || {}
+      end
+    end
+  end
+end

data/app/components/flowbite/card.rb

@@ -3,8 +3,24 @@
 module Flowbite
   # Renders a card element.
   #
-  # See https://flowbite.com/docs/components/cards/
+  # To render a title in the card, use the title argument or the title slot.
+  #
+  # @example Using the title slot
+  #     <%= render(Flowbite::Card.new) do |card| %>
+  #       <% card.with_title do %>
+  #         <div><%= parent_category.name %></div>
+  #         <%= render(Flowbite::Card::Title.new) { category.name } %>
+  #       <% end %>
+  #     <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Card::Title] title The title of the card,
+  #   rendered at the top. Use +with_title+ to set custom content.
+  #
+  # @see https://flowbite.com/docs/components/cards/
+  # @lookbook_embed CardPreview
   class Card < ViewComponent::Base
+    renders_one :title
+
     class << self
       def classes(state: :default, style: :default)
         style = styles.fetch(style)
@@ -13,33 +29,72 @@ module Flowbite
 
       # 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
+        Flowbite::Styles.from_hash(
+          {
+            default: {
+              default: ["p-6", "bg-neutral-primary-soft", "border", "border-default", "rounded-base", "shadow-xs"]
+            }
+          }.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: {})
+    #
+    # @param title [Hash] An optional title for the card. If provided,
+    #   it will be rendered at the top of the card in a h5 tag using the
+    #   Card::Title component. The hash can contain:
+    #   - `content`: The text content of the title
+    #   - `options`: Additional HTML options to pass to the title element
+    #   Alternatively, you can use the `title` slot to provide the entire
+    #   title element yourself.
+    def initialize(class: [], options: {}, title: {})
       @class = Array(binding.local_variable_get(:class)) || []
       @options = options || {}
+      @title = title
+    end
+
+    protected
+
+    def card_options
+      card_options = {}
+      card_options[:class] = self.class.classes + @class
+      card_options.merge(@options)
+    end
+
+    # Returns the HTML to use for the title element if any
+    def default_title
+      component = Flowbite::Card::Title.new(**default_title_options)
+
+      if default_title_content
+        component.with_content(default_title_content)
+      else
+        component
+      end
+
+      render(component)
+    end
+
+    def default_title_content
+      return nil unless @title
+
+      @title[:content]
+    end
+
+    # @return [Hash] The options to pass to the default title component
+    def default_title_options
+      title_options = @title.dup
+      title_options[:options] || {}
+    end
+
+    def title?
+      @title.present?
     end
   end
 end

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

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class 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 Checkbox < Input
       DEFAULT_CHECKED_VALUE = "1"
       DEFAULT_UNCHECKED_VALUE = "0"
 
@@ -22,13 +22,15 @@ module Flowbite
 
         # 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
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2"],
+                disabled: ["text-brand", "bg-neutral-secondary-medium", "border-default-medium", "rounded-sm", "focus:ring-brand", "focus:ring-2", "cursor-not-allowed"],
+                error: ["text-danger", "bg-danger-soft", "border-danger-subtle", "rounded-sm", "focus:ring-danger", "focus:ring-2"]
+              }
+            }.freeze
+          )
         end
       end
 
@@ -43,8 +45,8 @@ module Flowbite
         )
       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)
+      def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default, unchecked_value: DEFAULT_UNCHECKED_VALUE, value: DEFAULT_CHECKED_VALUE)
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, options: options, size: size)
         @unchecked_value = unchecked_value
         @value = value
       end

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

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

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Input
+    class DateTime < Input
+      def input_field_type
+        :datetime_field
+      end
+    end
+  end
+end

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

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

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

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class File < Field
+  class Input
+    class File < Input
       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

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
+    # A hint element for input fields.
+    #
+    # Provides additional context or instructions for the user.
+    #
+    # See https://flowbite.com/docs/forms/input-field/#helper-text
     class Hint < ViewComponent::Base
       STATES = [
         DEFAULT = :default
@@ -14,11 +19,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 +37,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 +47,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

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
     class Label < ViewComponent::Base
       STATES = [
@@ -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/number.rb

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

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

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

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

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

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

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class 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 RadioButton < Input
       class << self
         # Radio buttons only have their default size.
         def sizes
@@ -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

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The `Select` component renders a select input field for use in forms.
     #
     # https://flowbite.com/docs/forms/select/
     #
     # Wraps `ActionView::Helpers::FormOptionsHelper#select`: https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
-    class Select < Field
+    class Select < Input
       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, include_blank: false, multiple: 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