flowbite-components 0.1.4 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0013a87a4e4924d4ca2fe6f3ba8eff3f9f266be23a15b07cbddd25164d436805
-  data.tar.gz: d50dd418f1403dc2375754f4b0d295c9c2d4f1a09c0904bffce88fc76268135b
+  metadata.gz: 2df1ff6599a8e3fa6a41cd9b6329654d3ebb532eae460f37dceb1c8e9b3e0be5
+  data.tar.gz: 33362285ce24f76a7490f646dffb524a66f3c44c584e8da5d66abad27a74f809
 SHA512:
-  metadata.gz: e410ab1f18d6264c18cae8e5c0322c612422e33aa4136ab99ff21e6b0564ceaeb95decd262a265d72b9029022ff76965c19eeb0438d3d295c85cd2962986a3ab
-  data.tar.gz: 168b101505fbddfc952c334cc169c1e12e5f129beb8c3f884ffd32047c0548bd22655fd03a6da3589f9ff5071c94850d727761c7aacb96b2712c09420657147c
+  metadata.gz: 9968e1c9ad9230e73475ddc85d1069395444700af804f5712b8f3bef027fd4744b3eec136cd3edc737f947aaf478b5fa22279ed3f9494735684c8d66e93690c4
+  data.tar.gz: 3d3f420dbf18ceb93de989ea5818aff5551279cc29e11e4c326ccb2148ca76dfaf8c451571c911c0149ff129f772d674752ec7b126ece767bd7f34d3b1a43503

data/CHANGELOG.md

@@ -3,13 +3,37 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [0.3.0]
 
 ### Added
 
+* Badge component.
+* Sidebar component.
+
 ### Changed
 
-### Removed
+### Fixed
+
+* `:class` arguments to subcomponents (ie `hint` and `input`) of Flowbite::InputField are now forwarded correctly. If passed as `:class` the given value is added to the existing class names, if passed in `options[:class]` the existing class attribute is replaced.
+
+
+## [0.2.0]
+
+### Added
+
+* Breadcrumb component, including Flowbite::Breadcrumb::Item with Flowbite::Breadcrumb::Item::First and Flowbite::Breadcrumb::Item::Current variants.
+* DateTime input field components.
+* Toast component.
+* Ruby 4.0 support (no changes).
+
+### Changed
+
+* [BREAKING] The API of Flowbite::InputField::RadioButton now follows the same structure as the other components for hints. Instead of passing a String (`hint: "This is the hint"`) you now have to pass a Hash that's passed along to the Hint component (i.e. `hint: {content: "This is the hint"}`), allowing you to customize other options (eg HTML attributes like class) as well.
+* [BREAKING] Flowbite::Input::Field has been renamed to Flowbite::Input. All individual input components now use that as their superclass. This matches the class hierarchy of Flowbite::InputField::* classes better and allows Flowbite::Input to automagically appear in the documentation.
+
+### Fixed
+
+* Flowbite::InputField classes now correctly add their options to the container element, so you can add id attributes or connect Stimulus controllers again.
 
 
 ## [0.1.4]
@@ -19,7 +43,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * 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`.
+* Input-elements now support forms without an object; i.e. forms built with `form_tag` - not `form_for` or `form_with`.
 
 ### Changed
 
@@ -28,7 +52,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Removed
 
-* [BREAKING] Color-specific styles from Flowbite::Button, ie `alternative`, `green`, `light`, `purple`, `red`, `yellow`.
+* [BREAKING] Color-specific styles from Flowbite::Button, i.e. `alternative`, `green`, `light`, `purple`, `red`, `yellow`.
 
 
 ## [0.1.3]

data/README.md

@@ -7,6 +7,8 @@ Unofficial, open source implementation of [Flowbite](https://flowbite.com/) comp
 
 Flowbite Components provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.
 
+Preview the components at https://flowbite-components.substancelab.com/lookbook/
+
 ## Features
 
 - **Full Flowbite Design System**: Faithful implementation of Flowbite components
@@ -82,6 +84,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 <% end %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Button Examples
 
 ```erb
@@ -91,16 +95,18 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 <% end %>
 
 <!-- Outline button with color -->
-<%= render Flowbite::Button::Outline.new(style: :blue) do %>
+<%= render Flowbite::Button::Outline.new(style: :success) do %>
   Outline Button
 <% end %>
 
 <!-- Pill button -->
-<%= render Flowbite::Button::Pill.new(style: :green) do %>
+<%= render Flowbite::Button::Pill.new(style: :danger) do %>
   Pill Button
 <% end %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/button/default.
+
 ### Custom Input Options
 
 ```erb
@@ -118,6 +124,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Custom Labels
 
 ```erb
@@ -131,6 +139,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_label/inputlabel.
+
 ### Disabled and Error States
 
 ```erb
@@ -149,6 +159,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/disabled_state.
+
 ## How to customize components
 
 ### Add specific CSS classes
@@ -238,7 +250,7 @@ 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
+recreate the entire classlist, i.e. 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
@@ -276,7 +288,7 @@ This library includes a demo application with previews for all components. To vi
 1. cd demo
 2. Run `bundle && npm install`
 3. Run `rails server`
-4. Visit `http://localhost:3000/rails/lookbook`
+4. Visit `http://localhost:3000/lookbook`
 
 ## Contributing
 
@@ -296,6 +308,13 @@ Bug reports and pull requests are welcome on GitHub at [https://github.com/subst
 - [ViewComponent Documentation](https://viewcomponent.org/)
 - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
 
+## Other ViewComponent-based libraries
+
+If Flowbite isn't your preference, perhaps one of these other component libraries suits you better?
+
+* [GOV.UK Components](https://govuk-components.netlify.app/introduction/get-started/)
+* [Primer Product UI for Rails](https://primer.style/product/getting-started/rails/)
+
 ## Other Flowbite component libraries
 
 * https://flowbite-react.com/

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

@@ -0,0 +1,4 @@
+<%= content_tag(tag_name, **tag_options) do %>
+  <% if dot? %><%= render(Flowbite::Badge::Dot.new(style: @style)) %><% end %>
+  <%= content %>
+<% end %>

data/app/components/flowbite/badge/dot.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Badge
+    # Renders a colored dot indicator for use inside a badge.
+    #
+    # @param style [Symbol] The color style of the dot (:alternative, :brand,
+    #   :danger, :gray, :success, :warning).
+    class Dot < ViewComponent::Base
+      CLASSES = {
+        alternative: ["bg-heading", "me-1", "rounded-full"],
+        brand: ["bg-fg-brand-strong", "me-1", "rounded-full"],
+        danger: ["bg-fg-danger-strong", "me-1", "rounded-full"],
+        gray: ["bg-heading", "me-1", "rounded-full"],
+        success: ["bg-fg-success-strong", "me-1", "rounded-full"],
+        warning: ["bg-fg-warning", "me-1", "rounded-full"]
+      }.freeze
+
+      SIZES = {
+        default: ["h-1.5", "w-1.5"]
+      }.freeze
+
+      class << self
+        def classes(size: :default, style: :brand)
+          CLASSES.fetch(style) + sizes.fetch(size)
+        end
+
+        def sizes
+          SIZES
+        end
+      end
+
+      attr_reader :size, :style
+
+      def initialize(size: :default, style: :brand)
+        @size = size
+        @style = style
+      end
+
+      def call
+        content_tag(:span, nil, class: self.class.classes(size: size, style: style))
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Badge
+    # Renders a pill-shaped badge with fully rounded corners.
+    #
+    # @example Basic usage
+    #  <%= render(Flowbite::Badge::Pill.new) { "Default" } %>
+    #
+    # @see https://flowbite.com/docs/components/badge/
+    class Pill < Flowbite::Badge
+      class << self
+        # rubocop:disable Layout/LineLength
+        def styles
+          Flowbite::Styles.from_hash({
+            alternative: {
+              default: ["bg-neutral-primary-soft", "hover:bg-neutral-secondary-medium", "rounded-full", "text-heading"]
+            },
+            brand: {
+              default: ["bg-brand-softer", "hover:bg-brand-soft", "rounded-full", "text-fg-brand-strong"]
+            },
+            danger: {
+              default: ["bg-danger-soft", "hover:bg-danger-medium", "rounded-full", "text-fg-danger-strong"]
+            },
+            gray: {
+              default: ["bg-neutral-secondary-medium", "hover:bg-neutral-tertiary-medium", "rounded-full", "text-heading"]
+            },
+            success: {
+              default: ["bg-success-soft", "hover:bg-success-medium", "rounded-full", "text-fg-success-strong"]
+            },
+            warning: {
+              default: ["bg-warning-soft", "hover:bg-warning-medium", "rounded-full", "text-fg-warning"]
+            }
+          }.freeze)
+        end
+        # rubocop:enable Layout/LineLength
+      end
+    end
+  end
+end

data/app/components/flowbite/badge.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a badge component for displaying labels, counts, or status
+  # indicators.
+  #
+  # @example Basic usage
+  #  <%= render(Flowbite::Badge.new) { "Default" } %>
+  #
+  # @example With border
+  #  <%= render(Flowbite::Badge.new(bordered: true, style: :success)) { "Success" } %>
+  #
+  # @see https://flowbite.com/docs/components/badge/
+  # @lookbook_embed BadgePreview
+  class Badge < ViewComponent::Base
+    SIZES = {
+      default: ["text-xs", "font-medium", "px-1.5", "py-0.5"],
+      lg: ["text-sm", "font-medium", "px-2", "py-1"]
+    }.freeze
+
+    BORDER_CLASSES = {
+      alternative: ["border", "border-default"],
+      brand: ["border", "border-brand-subtle"],
+      danger: ["border", "border-danger-subtle"],
+      gray: ["border", "border-default-medium"],
+      success: ["border", "border-success-subtle"],
+      warning: ["border", "border-warning-subtle"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, state: :default, style: :brand)
+        styles.fetch(style).fetch(state) + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        Flowbite::Styles.from_hash({
+          alternative: {
+            default: ["bg-neutral-primary-soft", "hover:bg-neutral-secondary-medium", "rounded", "text-heading"]
+          },
+          brand: {
+            default: ["bg-brand-softer", "hover:bg-brand-soft", "rounded", "text-fg-brand-strong"]
+          },
+          danger: {
+            default: ["bg-danger-soft", "hover:bg-danger-medium", "rounded", "text-fg-danger-strong"]
+          },
+          gray: {
+            default: ["bg-neutral-secondary-medium", "hover:bg-neutral-tertiary-medium", "rounded", "text-heading"]
+          },
+          success: {
+            default: ["bg-success-soft", "hover:bg-success-medium", "rounded", "text-fg-success-strong"]
+          },
+          warning: {
+            default: ["bg-warning-soft", "hover:bg-warning-medium", "rounded", "text-fg-warning"]
+          }
+        }.freeze)
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    attr_reader :options
+
+    # @param bordered [Boolean] Whether to add a border to the badge.
+    # @param class [String, Array<String>] Additional CSS classes.
+    # @param dot [Boolean] Whether to show a dot indicator.
+    # @param href [String] If provided, renders the badge as a link.
+    # @param size [Symbol] The size of the badge (:default or :lg).
+    # @param style [Symbol] The color style (:alternative, :brand, :danger,
+    #   :gray, :success, :warning).
+    def initialize(bordered: false, class: nil, dot: false, href: nil,
+      size: :default, style: :brand, **options)
+      @bordered = bordered
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @dot = dot
+      @href = href
+      @size = size
+      @style = style
+      @options = options
+    end
+
+    def bordered?
+      !!@bordered
+    end
+
+    def dot?
+      !!@dot
+    end
+
+    def link?
+      @href.present?
+    end
+
+    private
+
+    def classes
+      result = self.class.classes(size: @size, state: :default, style: @style)
+      result += BORDER_CLASSES.fetch(@style) if bordered?
+      result += ["inline-flex", "items-center"] if dot?
+      result + @class
+    end
+
+    def tag_name
+      link? ? :a : :span
+    end
+
+    def tag_options
+      opts = {class: classes}
+      opts[:href] = @href if link?
+      opts.merge(options)
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/home_icon.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Renders a breadcrumb home icon.
+    #
+    # This is typically used as a prefix icon in the first breadcrumb item,
+    # but can be used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Breadcrumb::HomeIcon.new %>
+    class HomeIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-3 h-3 me-2.5",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        ) do
+          tag.path(
+            d: "m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/item/current.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # Renders the current page breadcrumb item.
+      # Current items are rendered as non-interactive spans with different styling.
+      #
+      # @param options [Hash] Additional HTML attributes to pass to the span element.
+      #
+      # @example Current page item
+      #   <%= render Flowbite::Breadcrumb::Item::Current.new { "Current Page" } %>
+      class Current < Item
+        def initialize(**options)
+          super(href: nil, **options)
+        end
+
+        protected
+
+        def item_options
+          {"aria-current": "page"}
+        end
+
+        def render_link
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:span, content, **link_options)
+        end
+
+        def link_classes
+          ["ms-1", "text-sm", "font-medium", "text-body-subtle"]
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/item/first.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # Renders the first breadcrumb item (typically home).
+      # First items don't show a separator icon.
+      #
+      # @param href [String] The URL for the breadcrumb link.
+      # @param options [Hash] Additional HTML attributes to pass to the link element.
+      #
+      # @example First item
+      #   <%= render Flowbite::Breadcrumb::Item::First.new(href: "/") { "Home" } %>
+      class First < Item
+        protected
+
+        def item_options
+          {class: "inline-flex items-center"}
+        end
+
+        def link_classes
+          ["text-sm", "font-medium", "inline-flex", "items-center", "text-body", "hover:text-fg-brand"]
+        end
+
+        def prefix_icon
+          nil
+        end
+
+        def render_link
+          icon = render(Flowbite::Breadcrumb::HomeIcon.new)
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:a, safe_join([icon, content]), href: href, **link_options)
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/item.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Base class for rendering a breadcrumb item (middle items in the breadcrumb trail).
+    #
+    # @param href [String] The URL for the breadcrumb link.
+    # @param options [Hash] Additional HTML attributes to pass to the link element.
+    #
+    # @example Middle item
+    #   <%= render Flowbite::Breadcrumb::Item.new(href: "/projects") { "Projects" } %>
+    class Item < ViewComponent::Base
+      attr_reader :href, :options
+
+      def initialize(href:, **options)
+        super()
+        @href = href
+        @options = options
+      end
+
+      def call
+        content_tag(:li, item_options) do
+          content_tag(:div, class: "flex items-center") do
+            concat(render(prefix_icon)) if prefix_icon
+            concat(render_link)
+          end
+        end
+      end
+
+      protected
+
+      def item_options
+        {}
+      end
+
+      def prefix_icon
+        Flowbite::Breadcrumb::SeparatorIcon.new
+      end
+
+      def render_link
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:a, content, href: href, **link_options)
+      end
+
+      def link_classes
+        ["ms-1", "text-sm", "font-medium", "text-body", "hover:text-fg-brand"]
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/separator_icon.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Renders a breadcrumb separator icon.
+    #
+    # This is automatically used by Breadcrumb::Item components, but can be
+    # used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Breadcrumb::SeparatorIcon.new %>
+    class SeparatorIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-3.5 h-3.5 rtl:rotate-180 text-body",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          height: 24,
+          viewBox: "0 0 24 24",
+          width: 24
+        ) do
+          tag.path(
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "m9 5 7 7-7 7"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb navigation component.
+  #
+  # Use {Flowbite::Breadcrumb} and the child {Flowbite::Breadcrumb::Item}
+  # components to create and indicate a series of page structure and URLs to
+  # help the user navigate through the website.
+  #
+  # Breadcrumbs consist of the following components:
+  #
+  # - {Flowbite::Breadcrumb}: Container for breadcrumb items.
+  # - {Flowbite::Breadcrumb::HomeIcon}: Home icon for the first breadcrumb item.
+  # - {Flowbite::Breadcrumb::SeparatorIcon}: Separator between breadcrumb items.
+  # - {Flowbite::Breadcrumb::Item}: An individual breadcrumb item.
+  # - {Flowbite::Breadcrumb::Item::Current}: An individual breadcrumb item
+  #   without a link, usually used for the current page in the breadcrumb trail.
+  # - {Flowbite::Breadcrumb::Item::First}: An individual breadcrumb item with a
+  #   home icon on it.
+  #
+  # @example Usage
+  #   <%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item::First.new(href: "/")) { "Root page" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item.new(href: "/projects")) { "Parent page" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item::Current.new) { "Current Page" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Breadcrumb::Item] items The items of the
+  #   breadcrumb trail. Use {Flowbite::Breadcrumb::Item::First} for the first
+  #   item to get a home icon, and {Flowbite::Breadcrumb::Item::Current} for the
+  #   last item to render it without a link.
+  #
+  # @lookbook_embed BreadcrumbPreview
+  # @see https://flowbite.com/docs/components/breadcrumb/
+  class Breadcrumb < ViewComponent::Base
+    renders_many :items
+
+    def call
+      content_tag(:nav, class: "flex", "aria-label": "Breadcrumb") do
+        content_tag(:ol, class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse") do
+          items.each do |item|
+            concat(item)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/button.rb

@@ -1,14 +1,15 @@
 # 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-1.5"],

data/app/components/flowbite/card.rb

@@ -3,7 +3,21 @@
 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
 

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"