flowbite-components 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2641783b14422d1a71ae1bc126308ce749e54ab33971baa9f2c590e7368a3d18
-  data.tar.gz: 919b625a46a74adafea39e617906d3da0c79f44876aaaba80c202fbae6ad9f0a
+  metadata.gz: 0ca94dfc5af1c662f4a7cfb77f038f60402daf411673078c30b77672280c6055
+  data.tar.gz: 60ad1e86847bd59c9b8ba598d44562cbd8f24776b9e696bc55e60550da9cfc0b
 SHA512:
-  metadata.gz: 436530353e5ae17c78af2a1d84a3125677d4fbc23a66191ff3b355f205a65307ddbc908d5c53dccef5806bd4151d6f6842f5e53f2079290179b37b96585940d5
-  data.tar.gz: 9031664132054b141c7937dfa0794cde6924c86907d0b3c544364f101b1937de5700f86cf89f6350bb159769be35095e3f3cf59572521052941b0f1f4f922155
+  metadata.gz: 2676a2b3da22cae60d35793a71d2e24637edb9cd61f5d3096c95352b1f6426d3e1116d124a474f05fa5198f4ce7935b1f0499f1ee82eb756101a9229a1ecf6bc
+  data.tar.gz: 18fc7aaad24ffad2d9ec01a5ae772bf0b7194a24d3d91800a535fa3b3fd22017f1fac025791ff59a4a6de249d931abf2d30d16e88e3e1f50e78fc04d747a9899

data/CHANGELOG.md

@@ -3,19 +3,42 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [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]
+
+### 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; i.e. 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, 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
@@ -22,7 +24,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 +33,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 +46,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
@@ -80,6 +84,8 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 <% end %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Button Examples
 
 ```erb
@@ -89,16 +95,18 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 <% 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
@@ -116,6 +124,8 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Custom Labels
 
 ```erb
@@ -129,6 +139,8 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_label/inputlabel.
+
 ### Disabled and Error States
 
 ```erb
@@ -147,6 +159,8 @@ Add Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/ap
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/disabled_state.
+
 ## How to customize components
 
 ### Add specific CSS classes
@@ -217,6 +231,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, 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
+
+```ruby
+render(Component.new(options: {class: "these replace the classes"}))
+```
 
 ## Development
 
@@ -247,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
 
@@ -267,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/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/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