flowbite-components 0.1.3 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2641783b14422d1a71ae1bc126308ce749e54ab33971baa9f2c590e7368a3d18
-  data.tar.gz: 919b625a46a74adafea39e617906d3da0c79f44876aaaba80c202fbae6ad9f0a
+  metadata.gz: 0013a87a4e4924d4ca2fe6f3ba8eff3f9f266be23a15b07cbddd25164d436805
+  data.tar.gz: d50dd418f1403dc2375754f4b0d295c9c2d4f1a09c0904bffce88fc76268135b
 SHA512:
-  metadata.gz: 436530353e5ae17c78af2a1d84a3125677d4fbc23a66191ff3b355f205a65307ddbc908d5c53dccef5806bd4151d6f6842f5e53f2079290179b37b96585940d5
-  data.tar.gz: 9031664132054b141c7937dfa0794cde6924c86907d0b3c544364f101b1937de5700f86cf89f6350bb159769be35095e3f3cf59572521052941b0f1f4f922155
+  metadata.gz: e410ab1f18d6264c18cae8e5c0322c612422e33aa4136ab99ff21e6b0564ceaeb95decd262a265d72b9029022ff76965c19eeb0438d3d295c85cd2962986a3ab
+  data.tar.gz: 168b101505fbddfc952c334cc169c1e12e5f129beb8c3f884ffd32047c0548bd22655fd03a6da3589f9ff5071c94850d727761c7aacb96b2712c09420657147c

data/CHANGELOG.md

@@ -7,15 +7,28 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
-*
+### Changed
+
+### Removed
+
+
+## [0.1.4]
+
+### Added
+
+* Flowbite::Link component to render links.
+* Flowbite::Card now displays a title via the title argument/slot.
+* Improved error message when an unknown style is requested.
+* Input-elements now support forms without an object; ie forms built with `form_tag` - not `form_for` or `form_with`.
 
 ### Changed
 
-*
+* [BREAKING] All components now use Flowbite 4 style classes. This adds the option for easier styling, uses semantic variant names, and keeps us up to date with Flowbite proper.
+* Extra CSS classes passed to components in the `class` argument are now added to the default classes from the component. This optimizes for minor tweaks and additions, which is likely to be the most common use case. If you need to replace all classes on the root element of the component, pass them in `options[:class]` instead.
 
 ### Removed
 
-*
+* [BREAKING] Color-specific styles from Flowbite::Button, ie `alternative`, `green`, `light`, `purple`, `red`, `yellow`.
 
 
 ## [0.1.3]

data/README.md

@@ -22,7 +22,7 @@ Flowbite Components provides a comprehensive library of UI components following
 Add the gem to your application's Gemfile:
 
 ```ruby
-gem 'flowbite-components'
+gem "flowbite-components"
 ```
 
 Then execute:
@@ -31,9 +31,9 @@ Then execute:
 bundle install
 ```
 
-### Configuration
+### tailwindcss-rails
 
-Make sure you have Tailwind CSS installed in your Rails application. We recommend using the [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) gem:
+Tailwind needs to be able to look through your code in order to generate the final CSS file with the class names you actually use. To allow Tailwind to find CSS class names inside flowbite-components you need to use [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) gem:
 
 ```ruby
 gem "tailwindcss-rails", ">= 4.3.0"
@@ -44,17 +44,19 @@ gem "tailwindcss-rails", ">= 4.3.0"
 Install Flowbite as an npm dependency:
 
 ```bash
-npm install flowbite
+yarn add flowbite
 ```
 
 Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/application.css`:
 
 ```css
-@import "flowbite/src/themes/default";
 @plugin "flowbite/plugin";
+@import "flowbite/src/themes/default";
 @import "../builds/tailwind/flowbite_components";
 ```
 
+If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/customize/theming/), change `@import "flowbite/src/themes/default";` accordingly.
+
 ## Usage examples
 
 ### Basic Form Field
@@ -217,6 +219,33 @@ renders
 - **Outline Button**: `Flowbite::Button::Outline`
 - **Pill Button**: `Flowbite::Button::Pill`
 
+#### Cards
+- **Card**: `Flowbite::Card` (default card with content and title)
+
+#### Navigation
+- **Link**: `Flowbite::Link` (default link styling)
+
+
+## Principles
+
+### CSS classes are additive
+
+Passing classes via the `class` argument to a component adds the classes to the
+default ones instead of replacing them.
+
+```ruby
+render(Component.new(class: "these are added"))
+```
+
+This makes for easier customization of components, where you don't have to
+recreate the entire classlist, ie in order to increase sizes or add margins or
+whatever.
+
+If you want to replace the entire class attribute for a component, pass it as part of the `options` hash, ie
+
+```ruby
+render(Component.new(options: {class: "these replace the classes"}))
+```
 
 ## Development
 

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

@@ -4,18 +4,33 @@ module Flowbite
   class Button
     class Outline < Flowbite::Button
       class << self
-        # rubocop:disable Layout/LineLength
+        # rubocop:disable Layout/LineLength, Metrics/MethodLength
         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"]
-            )
-          }
+          Flowbite::Styles.from_hash({
+            danger: {
+              default: ["focus:outline-none", "text-danger", "bg-transparent", "box-border", "border", "border-danger", "hover:text-white", "hover:bg-danger-strong", "focus:ring-4", "focus:ring-danger-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
+            },
+            dark: {
+              default: ["focus:outline-none", "text-dark", "bg-transparent", "box-border", "border", "border-dark", "hover:text-white", "hover:bg-dark-strong", "focus:ring-4", "focus:ring-neutral-tertiary", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
+            },
+            default: {
+              default: ["focus:outline-none", "text-brand", "bg-transparent", "box-border", "border", "border-brand", "hover:text-white", "hover:bg-brand-strong", "focus:ring-4", "focus:ring-brand-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
+            },
+            secondary: {
+              default: ["focus:outline-none", "text-body", "bg-transparent", "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", "text-center", "me-2", "mb-2"]
+            },
+            success: {
+              default: ["focus:outline-none", "text-success", "bg-transparent", "box-border", "border", "border-success", "hover:text-white", "hover:bg-success-strong", "focus:ring-4", "focus:ring-success-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
+            },
+            tertiary: {
+              default: ["focus:outline-none", "text-body", "bg-transparent", "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", "text-center", "me-2", "mb-2"]
+            },
+            warning: {
+              default: ["focus:outline-none", "text-warning", "bg-transparent", "box-border", "border", "border-warning", "hover:text-white", "hover:bg-warning-strong", "focus:ring-4", "focus:ring-warning-medium", "shadow-xs", "font-medium", "leading-5", "rounded-base", "text-center", "me-2", "mb-2"]
+            }
+          }.freeze)
         end
-        # rubocop:enable Layout/LineLength
+        # rubocop:enable Layout/LineLength, Metrics/MethodLength
       end
     end
   end

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

@@ -6,32 +6,32 @@ module Flowbite
       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"]
-            )
-          }
+          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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            },
+            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-full", "text-center"]
+            }
+          }.freeze)
         end
         # rubocop:enable Layout/LineLength, Metrics/MethodLength
       end

data/app/components/flowbite/button.rb

@@ -11,9 +11,9 @@ module Flowbite
   # as HTML attributes.
   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 +31,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 +83,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

@@ -5,6 +5,8 @@ module Flowbite
   #
   # See https://flowbite.com/docs/components/cards/
   class Card < ViewComponent::Base
+    renders_one :title
+
     class << self
       def classes(state: :default, style: :default)
         style = styles.fetch(style)
@@ -13,33 +15,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

@@ -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/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,13 +9,13 @@ 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, 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

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,6 +5,10 @@ module Flowbite
     class Checkbox < InputField
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_hint_options
         return {} unless @hint
 
@@ -29,9 +33,9 @@ module Flowbite
 
       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
 
@@ -44,9 +48,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/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,13 +3,17 @@
 module Flowbite
   class InputField
     class RadioButton < InputField
-      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
 
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_input
         args = {
           attribute: @attribute,
@@ -56,9 +60,9 @@ module Flowbite
 
       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
 
@@ -76,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.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?
@@ -171,7 +189,13 @@ 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.

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

data/app/components/flowbite/styles.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Styles
+    class StyleNotFoundError < ::KeyError; end
+
+    class << self
+      def from_hash(styles_hash)
+        styles = Styles.new
+        styles_hash.each do |style_name, states_hash|
+          styles.add_style(style_name, states_hash)
+        end
+        styles
+      end
+    end
+
+    def add_style(style_name, states_hash)
+      @styles[style_name] = Flowbite::Style.new(states_hash)
+    end
+
+    def fetch(style_name)
+      return @styles[style_name] if @styles.key?(style_name)
+
+      raise \
+        StyleNotFoundError,
+        "Style not found: #{style_name}. Available styles: " \
+        "#{@styles.keys.sort.join(", ")}"
+    end
+
+    def initialize
+      @styles = {}
+    end
+  end
+end

data/lib/flowbite/components/version.rb

@@ -2,6 +2,6 @@
 
 module Flowbite
   module Components
-    VERSION = "0.1.3"
+    VERSION = "0.1.4"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flowbite-components
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.1.4
 platform: ruby
 authors:
 - Jakob Skjerning
@@ -39,6 +39,8 @@ files:
 - app/components/flowbite/button/outline.rb
 - app/components/flowbite/button/pill.rb
 - app/components/flowbite/card.rb
+- app/components/flowbite/card/card.html.erb
+- app/components/flowbite/card/title.rb
 - app/components/flowbite/input/checkbox.rb
 - app/components/flowbite/input/date.rb
 - app/components/flowbite/input/email.rb
@@ -70,7 +72,9 @@ files:
 - app/components/flowbite/input_field/text.rb
 - app/components/flowbite/input_field/textarea.rb
 - app/components/flowbite/input_field/url.rb
+- app/components/flowbite/link.rb
 - app/components/flowbite/style.rb
+- app/components/flowbite/styles.rb
 - lib/flowbite/components.rb
 - lib/flowbite/components/engine.rb
 - lib/flowbite/components/version.rb