flowbite-components 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: afc7f639fa9f28b2310d7f68cd3d8939e3eaa526ba80ee028c471664597e4581
-  data.tar.gz: 1b4e73f0bd471b9b3d36db8aba2e614e28f5573cbf7fd214de360a985767eade
+  metadata.gz: 0013a87a4e4924d4ca2fe6f3ba8eff3f9f266be23a15b07cbddd25164d436805
+  data.tar.gz: d50dd418f1403dc2375754f4b0d295c9c2d4f1a09c0904bffce88fc76268135b
 SHA512:
-  metadata.gz: 6d56824ba5b7d0c13bca6b31e4dac90a1859ec35c3c50478b90a4f67aae2cd7e7efcfb53dc29ddfcae9f4839695610ea5602e0f29b2ddd53c64a00b34562806d
-  data.tar.gz: efe21d27318e44196ecd0024663a143ba577ab8b2ca0a2b9e085263d4be3d7f472c22c68c5442d802c58717306a575d320325c4d9d8bb3d5f8b5e48fb444c992
+  metadata.gz: e410ab1f18d6264c18cae8e5c0322c612422e33aa4136ab99ff21e6b0564ceaeb95decd262a265d72b9029022ff76965c19eeb0438d3d295c85cd2962986a3ab
+  data.tar.gz: 168b101505fbddfc952c334cc169c1e12e5f129beb8c3f884ffd32047c0548bd22655fd03a6da3589f9ff5071c94850d727761c7aacb96b2712c09420657147c

data/CHANGELOG.md

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

data/README.md

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

data/app/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

@@ -1,8 +1,12 @@
+# frozen_string_literal: true
+
 module Flowbite
   # Renders a card element.
   #
   # 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)
@@ -11,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

@@ -9,6 +9,9 @@ module Flowbite
     #
     # https://flowbite.com/docs/forms/checkbox/
     class Checkbox < Field
+      DEFAULT_CHECKED_VALUE = "1"
+      DEFAULT_UNCHECKED_VALUE = "0"
+
       class << self
         # Checkboxes only have their default size.
         def sizes
@@ -19,19 +22,54 @@ 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
 
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          input_options,
+          checked_value,
+          unchecked_value
+        )
+      end
+
+      def initialize(attribute:, form:, 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
+
       def input_field_type
         :check_box
       end
+
+      # Returns the options argument for the input field
+      def input_options
+        {
+          class: classes,
+          disabled: disabled?
+        }.merge(options)
+      end
+
+      private
+
+      def checked_value
+        @value
+      end
+
+      attr_reader :unchecked_value
     end
   end
 end