uchi 0.1.5 → 0.1.6

data/app/assets/tailwind/uchi.css

@@ -10,12 +10,12 @@ running the following command:
 /* We need tailwindcss, duh */
 @import "tailwindcss";
 
-/* Import the default theme variables from Flowbite
-This imports them from node_modules/flowbite/src/themes/default.css */
-@import "flowbite/src/themes/default";
-
 /* Import the Flowbite plugin */
 @plugin "flowbite/plugin";
 
+/* Import the default theme variables from Flowbite */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+@import "flowbite/src/themes/default"; /* This imports them from node_modules/flowbite/src/themes/default.css */
+
 /* Configure the source files of Flowbite */
 @source "../../../node_modules/flowbite";

data/app/components/uchi/field/belongs_to/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Select.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Select.new(**options)) %>

data/app/components/uchi/field/belongs_to/index.html.erb

@@ -1 +1 @@
-<%= field.value(record) %>
+<%= label_for_associated_record %>

data/app/components/uchi/field/belongs_to/show.html.erb

@@ -1,5 +1,3 @@
-<% if associated_record %>
-  <%= render(Flowbite::Link.new(
-    href: associated_repository.routes.path_for(:show, id: associated_record.id)
-  ).with_content(associated_record.to_s)) %>
-<% end %>
+<%= render(Uchi::Flowbite::Link.new(
+  href: path_to_show_associated_record,
+).with_content(label_for_associated_record)) %>

data/app/components/uchi/field/belongs_to.rb

@@ -5,6 +5,23 @@ module Uchi
     class BelongsTo < Field
       DEFAULT_COLLECTION_QUERY = ->(query) { query }.freeze
 
+      module Helpers
+        def associated_record
+          field.value(record)
+        end
+
+        def associated_repository
+          reflection = record.class.reflect_on_association(field.name)
+          model = reflection.klass
+          repository_class = Uchi::Repository.for_model(model)
+          repository_class.new
+        end
+
+        def label_for_associated_record
+          associated_repository.title(associated_record)
+        end
+      end
+
       class Edit < Uchi::Field::Base::Edit
         def associated_repository
           model = reflection.klass
@@ -54,18 +71,24 @@ module Uchi
       end
 
       class Index < Uchi::Field::Base::Index
+        include Helpers
+
+        def render?
+          associated_record.present?
+        end
       end
 
       class Show < Uchi::Field::Base::Show
-        def associated_record
-          field.value(record)
+        include Helpers
+
+        def path_to_show_associated_record
+          associated_repository
+            .routes
+            .path_for(:show, id: associated_record.id)
         end
 
-        def associated_repository
-          reflection = record.class.reflect_on_association(field.name)
-          model = reflection.klass
-          repository_class = Uchi::Repository.for_model(model)
-          repository_class.new
+        def render?
+          associated_record.present?
         end
       end
 

data/app/components/uchi/field/boolean/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Checkbox.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Checkbox.new(**options)) %>

data/app/components/uchi/field/date/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Date.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Date.new(**options)) %>

data/app/components/uchi/field/date_time/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::DateTime.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::DateTime.new(**options)) %>

data/app/components/uchi/field/file/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::File.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::File.new(**options)) %>

data/app/components/uchi/field/file/index.html.erb

@@ -1,6 +1,7 @@
 <% attachment = field.value(record) %>
+
 <% if attachment.attached? %>
   <%= attachment.filename.to_s %>
 <% else %>
-  <span class="text-gray-400">—</span>
+  <%= render(Uchi::Ui::NoValue.new) %>
 <% end %>

data/app/components/uchi/field/file/show.html.erb

@@ -1,8 +1,9 @@
 <% attachment = field.value(record) %>
+
 <% if attachment.attached? %>
-  <%= render Flowbite::Link.new(href: Rails.application.routes.url_helpers.rails_blob_path(attachment, only_path: true)) do %>
+  <%= render Uchi::Flowbite::Link.new(href: Rails.application.routes.url_helpers.rails_blob_path(attachment, only_path: true)) do %>
     <%= attachment.filename %>
   <% end %>
 <% else %>
-  <span class="text-gray-400">—</span>
+  <%= render(Uchi::Ui::NoValue.new) %>
 <% end %>

data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb

@@ -1,5 +1,7 @@
 <div class="my-10">
-  <h2 class="px-4 my-6 text-2xl font-bold md:px-0"><%= repository.translate.field_label(field) %></h2>
+  <h2 class="px-4 my-6 text-2xl font-semibold tracking-tight text-heading md:px-0">
+    <%= repository.translate.field_label(field) %>
+  </h2>
 
   <%= render(Uchi::Ui::Index::TurboFrame.new(
     repository: associated_repository,
@@ -19,10 +21,10 @@
       },
     )
   )) do %>
-    <div class="relative overflow-x-auto bg-white border border-gray-200 shadow-sm md:rounded-lg dark:bg-gray-800 dark:border-gray-700">
+    <%= render(Uchi::Ui::Frame.new) do %>
       <div class="grid grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
-    </div>
+    <% end %>
   <% end %>
 </div>

data/app/components/uchi/field/has_many/show.html.erb

@@ -1,5 +1,7 @@
 <div class="my-10">
-  <h2 class="px-4 my-6 text-2xl font-bold md:px-0"><%= repository.translate.field_label(field) %></h2>
+  <h2 class="px-4 my-6 text-2xl font-semibold tracking-tight text-heading md:px-0">
+    <%= repository.translate.field_label(field) %>
+  </h2>
 
   <%= render(Uchi::Ui::Index::TurboFrame.new(
     repository: associated_repository,
@@ -19,10 +21,10 @@
       },
     )
   )) do %>
-    <div class="relative overflow-x-auto bg-white border border-gray-200 shadow-sm md:rounded-lg dark:bg-gray-800 dark:border-gray-700">
+    <%= render(Uchi::Ui::Frame.new) do %>
       <div class="grid grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
-    </div>
+    <% end %>
   <% end %>
 </div>

data/app/components/uchi/field/id/index.html.erb

@@ -1,4 +1,4 @@
-<%= render(Flowbite::Link.new(
+<%= render(Uchi::Flowbite::Link.new(
   href: @repository.routes.path_for(:show, id: record.id),
   target: "_top").with_content(field.value(record))
 ) %>

data/app/components/uchi/field/id/show.html.erb

@@ -1,4 +1,4 @@
-<%= render(Flowbite::Link.new(
+<%= render(Uchi::Flowbite::Link.new(
   href: @repository.routes.path_for(:show, id: record.id),
   target: "_top").with_content(field.value(record))
 ) %>

data/app/components/uchi/field/image/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::File.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::File.new(**options)) %>

data/app/components/uchi/field/image/index.html.erb

@@ -1,6 +1,7 @@
 <% attachment = field.value(record) %>
+
 <% if attachment.attached? %>
   <%= image_tag attachment.variant(resize_to_limit: [100, 100]), class: "h-12 w-12 object-cover rounded" %>
 <% else %>
-  <span class="text-gray-400">—</span>
+  <%= render(Uchi::Ui::NoValue.new) %>
 <% end %>

data/app/components/uchi/field/image/show.html.erb

@@ -1,6 +1,7 @@
 <% attachment = field.value(record) %>
+
 <% if attachment.attached? %>
   <%= image_tag attachment, class: "max-w-full h-auto rounded-lg shadow-md" %>
 <% else %>
-  <span class="text-gray-400">—</span>
+  <%= render(Uchi::Ui::NoValue.new) %>
 <% end %>

data/app/components/uchi/field/number/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Number.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Number.new(**options)) %>

data/app/components/uchi/field/string/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Text.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Text.new(**options)) %>

data/app/components/uchi/field/text/edit.html.erb

@@ -1 +1 @@
-<%= render(Flowbite::InputField::Textarea.new(**options)) %>
+<%= render(Uchi::Flowbite::InputField::Textarea.new(**options)) %>

data/app/components/{flowbite → uchi/flowbite}/breadcrumb.rb

@@ -1,20 +1,20 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   # Renders a breadcrumb navigation component.
   #
   # See https://flowbite.com/docs/components/breadcrumb/
   #
   # @example Basic usage with BreadcrumbItem components
-  #   <%= render Flowbite::Breadcrumb.new do |breadcrumb| %>
+  #   <%= render Uchi::Flowbite::Breadcrumb.new do |breadcrumb| %>
   #     <% breadcrumb.with_item do %>
-  #       <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+  #       <%= render Uchi::Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
   #     <% end %>
   #     <% breadcrumb.with_item do %>
-  #       <%= render Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  #       <%= render Uchi::Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
   #     <% end %>
   #     <% breadcrumb.with_item do %>
-  #       <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+  #       <%= render Uchi::Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
   #     <% end %>
   #   <% end %>
   class Breadcrumb < ViewComponent::Base

data/app/components/{flowbite → uchi/flowbite}/breadcrumb_home.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   # 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::BreadcrumbHome.new %>
+  #   <%= render Uchi::Flowbite::BreadcrumbHome.new %>
   class BreadcrumbHome < ViewComponent::Base
     def call
       tag.svg(

data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/current.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class BreadcrumbItem
     # Renders the current page breadcrumb item.
     # Current items are rendered as non-interactive spans with different styling.
@@ -8,7 +8,7 @@ module Flowbite
     # @param options [Hash] Additional HTML attributes to pass to the span element.
     #
     # @example Current page item
-    #   <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+    #   <%= render Uchi::Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
     class Current < BreadcrumbItem
       def initialize(**options)
         super(href: nil, **options)
@@ -26,7 +26,7 @@ module Flowbite
       end
 
       def link_classes
-        ["ms-1", "text-sm", "font-medium", "text-gray-500", "dark:text-gray-400"]
+        ["ms-1", "text-sm", "font-medium", "text-body-subtle"]
       end
     end
   end

data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item/first.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class BreadcrumbItem
     # Renders the first breadcrumb item (typically home).
     # First items don't show a separator icon.
@@ -9,7 +9,7 @@ module Flowbite
     # @param options [Hash] Additional HTML attributes to pass to the link element.
     #
     # @example First item
-    #   <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+    #   <%= render Uchi::Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
     class First < BreadcrumbItem
       protected
 
@@ -18,7 +18,7 @@ module Flowbite
       end
 
       def link_classes
-        ["text-sm", "font-medium", "inline-flex", "items-center", "text-gray-700", "hover:text-blue-600", "dark:text-gray-400", "dark:hover:text-white"]
+        ["text-sm", "font-medium", "inline-flex", "items-center", "text-body", "hover:text-fg-brand"]
       end
 
       def prefix_icon
@@ -26,7 +26,7 @@ module Flowbite
       end
 
       def render_link
-        icon = render(Flowbite::BreadcrumbHome.new)
+        icon = render(Uchi::Flowbite::BreadcrumbHome.new)
         link_options = {class: link_classes}.merge(options)
         content_tag(:a, safe_join([icon, content]), href: href, **link_options)
       end

data/app/components/{flowbite → uchi/flowbite}/breadcrumb_item.rb

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   # 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::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  #   <%= render Uchi::Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
   class BreadcrumbItem < ViewComponent::Base
     attr_reader :href, :options
 
@@ -33,7 +33,7 @@ module Flowbite
     end
 
     def prefix_icon
-      Flowbite::BreadcrumbSeparator.new
+      Uchi::Flowbite::BreadcrumbSeparator.new
     end
 
     def render_link
@@ -42,7 +42,7 @@ module Flowbite
     end
 
     def link_classes
-      ["ms-1", "text-sm", "font-medium", "text-gray-700", "hover:text-blue-600", "dark:text-gray-400", "dark:hover:text-white"]
+      ["ms-1", "text-sm", "font-medium", "text-body", "hover:text-fg-brand"]
     end
   end
 end

data/app/components/{flowbite → uchi/flowbite}/breadcrumb_separator.rb

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

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  class Button
+    class Outline < Uchi::Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength, Metrics/MethodLength
+        def styles
+          {
+            danger: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength, Metrics/MethodLength
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  class Button
+    class Pill < Uchi::Flowbite::Button
+      class << self
+        # rubocop:disable Layout/LineLength, Metrics/MethodLength
+        def styles
+          {
+            danger: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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: Uchi::Flowbite::Style.new(
+              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"]
+            )
+          }
+        end
+        # rubocop:enable Layout/LineLength, Metrics/MethodLength
+      end
+    end
+  end
+end

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

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  # Renders a HTML button element.
+  #
+  # See https://flowbite.com/docs/components/buttons/
+  #
+  # @param label [String] The text to display on the button.
+  #
+  # All other parameters are optional and are passed directly to the button tag
+  # as HTML attributes.
+  class Button < ViewComponent::Base
+    SIZES = {
+      xs: ["text-xs", "px-3", "py-1.5"],
+      sm: ["text-sm", "px-3", "py-2"],
+      default: ["text-sm", "px-4", "py-2.5"],
+      lg: ["text-base", "px-5", "py-3"],
+      xl: ["text-base", "px-6", "py-3.5"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, state: :default, style: :default)
+        style = styles.fetch(style) or raise "wut"
+        classes = style.fetch(state)
+        classes + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        {
+          danger: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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: Uchi::Flowbite::Style.new(
+            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(class: nil, size: :default, style: :default, **button_attributes)
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @size = size
+      @style = style
+      @button_attributes = button_attributes
+    end
+
+    def call
+      content_tag(
+        :button,
+        content,
+        **options
+      )
+    end
+
+    private
+
+    def classes
+      self.class.classes(size: size, state: :default, style: style) + @class
+    end
+
+    def options
+      {
+        class: classes
+      }.merge(button_attributes)
+    end
+  end
+end

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

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

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Uchi::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
+          {
+            default: Uchi::Flowbite::Style.new(
+              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