uchi 0.1.5 → 0.1.7

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

@@ -0,0 +1,40 @@
+<div
+  class="<%= container_classes.join(" ") %>"
+  role="alert"
+  <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>
+>
+  <%= render Uchi::Flowbite::Toast::Icon.new(style: style) %>
+
+  <div class="ms-3 text-sm font-normal"><%= message %></div>
+
+  <% if dismissible %>
+    <%# Styles from https://flowbite.com/docs/components/toast/#default-toast %>
+    <button
+      type="button"
+      class="
+        ms-auto flex items-center justify-center text-body
+        hover: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 text-sm
+        h-8 w-8 focus:outline-none
+      "
+      aria-label="Close"
+    >
+      <svg
+        class="w-3 h-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 14 14"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+        />
+      </svg>
+    </button>
+  <% end %>
+</div>

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

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   # Renders a toast notification element.
   #
   # See https://flowbite.com/docs/components/toast/
@@ -13,7 +13,7 @@ module Flowbite
   class Toast < ViewComponent::Base
     class << self
       def classes
-        ["flex", "items-center", "w-full", "max-w-xs", "p-4", "text-gray-500", "bg-white", "rounded-lg", "shadow-sm", "dark:text-gray-400", "dark:bg-gray-800"]
+        ["flex", "items-center", "w-full", "max-w-xs", "p-4", "text-body", "bg-neutral-primary-soft", "rounded-base", "shadow-xs", "border", "border-default"]
       end
     end
 

data/app/components/uchi/ui/actions/dropdown/dropdown.html.erb

@@ -0,0 +1,59 @@
+<div class="relative" data-controller="dropdown">
+  <%= render(Uchi::Flowbite::Button.new(style: :secondary, :data => {:action => "dropdown#toggle click@window->dropdown#hide"}, id: button_id)) do %>
+    <div class="inline-flex items-center">
+      <%= repository.translate.actions_button_label %>
+
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  <% end %>
+
+  <!-- Dropdown menu -->
+  <div
+    aria-orientation="vertical"
+    aria-hidden="true"
+    data-dropdown-target="menu"
+    class="
+      transition transform origin-top-right absolute z-10 hidden bg-neutral-primary-medium border border-default-medium
+      rounded-base shadow-lg w-44 mt-1 -ml-1/2
+    "
+    id="actions-dropdown-<%= record.id %>"
+    role="menu"
+    tabindex="-1"
+  >
+    <ul
+      class="p-2 text-sm text-body font-medium"
+      aria-labelledby="<%= button_id %>"
+    >
+      <% actions.each do |action| %>
+        <li role="menuitem">
+          <%= form_with url: helpers.actions_executions_path, method: :post, class: "block" do %>
+            <%= hidden_field_tag :model, repository.model.name %>
+            <%= hidden_field_tag :action_name, action.class.name %>
+            <%= hidden_field_tag :id, record.id %>
+
+            <%= button_tag type: "submit",
+                          class: "block inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" do %>
+              <%= action.name %>
+            <% end %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/components/uchi/ui/actions/dropdown.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Actions
+      # Renders a dropdown menu of actions that can be performed on a record.
+      #
+      # This component displays available actions for a repository in a dropdown
+      # menu. Each action can be clicked to execute it on the specified record(s).
+      class Dropdown < ViewComponent::Base
+        attr_reader :actions, :record, :repository
+
+        def initialize(actions:, record:, repository:)
+          super()
+          @actions = actions
+          @record = record
+          @repository = repository
+        end
+
+        def render?
+          actions.any?
+        end
+
+        private
+
+        def button_id
+          "actions-dropdown-button-#{record.id}"
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/breadcrumb/breadcrumb.html.erb

@@ -1,12 +1,12 @@
-<%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
+<%= render(Uchi::Flowbite::Breadcrumb.new) do |breadcrumb| %>
   <% items.each.with_index do |item, index| %>
     <% breadcrumb.with_item do %>
       <% if index.zero? %>
-        <%= render Flowbite::BreadcrumbItem::First.new(href: item[:href]).with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem::First.new(href: item[:href]).with_content(item[:label]) %>
       <% elsif index == items.size - 1 %>
-        <%= render Flowbite::BreadcrumbItem::Current.new.with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem::Current.new.with_content(item[:label]) %>
       <% else %>
-        <%= render Flowbite::BreadcrumbItem.new(href: item[:href]).with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem.new(href: item[:href]).with_content(item[:label]) %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/uchi/ui/form/input/collection_checkboxes.html.erb

@@ -15,6 +15,7 @@
         <div class="flex items-center h-5">
           <%= b.check_box(class: checkbox_classes.join(" "), disabled: disabled?) %>
         </div>
+
         <div class="ms-2 text-sm">
           <%= b.label(class: checkbox_label_classes.join(" ")) %>
         </div>
@@ -27,6 +28,6 @@
   <% end %>
 
   <% errors.each do |error| %>
-    <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+    <%= render(Uchi::Flowbite::Input::ValidationError.new) { error.upcase_first } %>
   <% end %>
 </div>

data/app/components/uchi/ui/form/input/collection_checkboxes.rb

@@ -68,22 +68,22 @@ module Uchi
           end
 
           def label_classes
-            base = ["block", "mb-2", "text-sm", "font-medium"]
+            base = ["select-none ms-2 text-sm font-medium"]
             if disabled?
-              base + ["text-gray-400", "dark:text-gray-500"]
+              base + ["text-fg-disabled"]
             elsif errors?
-              base + ["text-red-700", "dark:text-red-500"]
+              base + ["text-fg-danger-strong"]
             else
-              base + ["text-gray-900", "dark:text-white"]
+              base + ["text-heading"]
             end
           end
 
           def hint_classes
             base = ["text-xs", "font-normal", "mt-1"]
             if disabled?
-              base + ["text-gray-400", "dark:text-gray-500"]
+              base + ["text-fg-disabled"]
             else
-              base + ["text-gray-500", "dark:text-gray-300"]
+              base + ["text-body"]
             end
           end
 
@@ -92,26 +92,21 @@ module Uchi
           end
 
           def checkbox_classes
-            base = ["w-4", "h-4", "rounded-sm", "focus:ring-2", "focus:ring-offset-2"]
+            base = ["w-4", "h-4", "border", "rounded-xs", "focus:ring-2"]
             if disabled?
-              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
-                "dark:bg-gray-700", "dark:border-gray-600"]
+              base + ["border-light", "bg-neutral-secondary-medium", "focus:ring-brand-soft"]
             elsif errors?
-              base + ["text-red-600", "bg-red-50", "border-red-500",
-                "focus:ring-red-500", "dark:focus:ring-red-600",
-                "dark:bg-gray-700", "dark:border-red-500"]
+              base + ["text-fg-danger", "bg-danger-soft", "border-fg-danger", "focus:ring-fg-danger"]
             else
-              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
-                "focus:ring-blue-500", "dark:focus:ring-blue-600",
-                "dark:bg-gray-700", "dark:border-gray-600"]
+              base + ["border-default-medium", "bg-neutral-secondary-medium", "focus:ring-brand-soft"]
             end
           end
 
           def checkbox_label_classes
             if disabled?
-              ["ms-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"]
+              ["select-none", "ms-2", "text-sm", "font-medium", "text-fg-disabled"]
             else
-              ["ms-2", "text-sm", "font-medium", "text-gray-900", "dark:text-gray-300"]
+              ["select-none", "ms-2", "text-sm", "font-medium", "text-heading"]
             end
           end
 

data/app/components/uchi/ui/frame/frame.html.erb

@@ -1,3 +1,8 @@
-<div class="bg-white border border-gray-200 shadow-sm md:rounded-lg dark:bg-gray-800 dark:border-gray-700">
+<div
+  class="
+    relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base
+    border border-default
+  "
+>
   <%= content %>
 </div>

data/app/components/uchi/ui/index/records_table/records_table.html.erb

@@ -1,31 +1,86 @@
-<table class="w-full text-left text-gray-500 rtl:text-right dark:text-gray-400">
-  <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+<%# Styles from https://flowbite.com/docs/components/tables/#default-table %>
+<table class="w-full text-sm text-left text-body rtl:text-right">
+  <thead
+    class="
+      text-sm text-body bg-neutral-secondary-soft border-b rounded-base
+      border-default
+    "
+  >
     <tr>
       <% columns.each do |field| %>
         <% component_class = field.index_component_class %>
-        <th scope="col" class="px-4 py-3 md:px-6 whitespace-nowrap <%= component_class.classes_for_table_cell.join(" ") %>">
+
+        <th
+          scope="col"
+          class="px-6 py-3 font-medium whitespace-nowrap <%= component_class.classes_for_table_cell.join(" ") %>"
+        >
           <% if field.sortable? %>
             <% if field.name == sort_order&.name %>
               <% if sort_order&.ascending? %>
                 <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :desc})) do %>
                   <%= repository.translate.field_label(field) %>
-                  <svg class="inline w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19V5m0 14-4-4m4 4 4-4"/>
+
+                  <svg
+                    class="inline w-4 h-4 text-heading"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 19V5m0 14-4-4m4 4 4-4"
+                    />
                   </svg>
                 <% end %>
               <% else %>
                 <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :asc})) do %>
                   <%= repository.translate.field_label(field) %>
-                  <svg class="inline w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v13m0-13 4 4m-4-4-4 4"/>
+
+                  <svg
+                    class="inline w-4 h-4 text-heading"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke="currentColor"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M12 6v13m0-13 4 4m-4-4-4 4"
+                    />
                   </svg>
                 <% end %>
               <% end %>
             <% else %>
               <%= link_to(repository.routes.path_for(:index, query: query, scope: scope, sort: {:by => field.name, :direction => :asc})) do %>
                 <%= repository.translate.field_label(field) %>
-                <svg class="inline w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 20V7m0 13-4-4m4 4 4-4m4-12v13m0-13 4 4m-4-4-4 4"/>
+
+                <svg
+                  class="inline w-4 h-4 text-heading"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M8 20V7m0 13-4-4m4 4 4-4m4-12v13m0-13 4 4m-4-4-4 4"
+                  />
                 </svg>
               <% end %>
             <% end %>
@@ -34,29 +89,65 @@
           <% end %>
         </th>
       <% end %>
-      <th scope="col" class="px-4 py-3 md:px-6"></th>
+
+      <th scope="col" class="px-6 py-3"></th>
     </tr>
   </thead>
+
   <tbody>
     <% records.each do |record| %>
-      <tr class="bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+      <tr class="bg-neutral-primary border-b border-default">
         <% columns.each do |field| %>
           <% component_class = field.index_component_class %>
-          <td class="px-4 py-4 md:px-6 <%= component_class.classes_for_table_cell.join(" ") %>">
+
+          <td class="px-6 py-4 <%= component_class.classes_for_table_cell.join(" ") %>">
             <%= render(field.index_component(record: record, repository: repository)) %>
           </td>
         <% end %>
-        <td class="px-4 py-4 text-right md:px-6">
+
+        <td class="px-6 py-4 text-right">
           <div class="flex justify-end space-x-2">
             <%= link_to(repository.routes.path_for(:show, id: record.id), class: "inline-block hover:text-blue-600 hover:dark:text-blue-500", :data => {:"turbo-frame" => "_top"}) do %>
-              <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
-                <path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+              <svg
+                class="w-6 h-6"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"
+                />
+
+                <path
+                  stroke="currentColor"
+                  stroke-width="2"
+                  d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+                />
               </svg>
             <% end %>
+
             <%= link_to(path_for_edit(record), class: "inline-block hover:text-blue-600 hover:dark:text-blue-500", :data => {:"turbo-frame" => "_top"}) do %>
-              <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"/>
+              <svg
+                class="w-6 h-6"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m14.304 4.844 2.852 2.852M7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-4.5m2.409-9.91a2.017 2.017 0 0 1 0 2.853l-6.844 6.844L8 14l.713-3.565 6.844-6.844a2.015 2.015 0 0 1 2.852 0Z"
+                />
               </svg>
             <% end %>
           </div>

data/app/components/uchi/ui/index/records_table/search_form/search_form.html.erb

@@ -1,12 +1,27 @@
-<%= form_tag(repository.routes.path_for(:index), class: "flex items-center max-w-sm", method: :get) do %>
+<%= form_tag(repository.routes.path_for(:index), class: "flex items-center max-w-sm space-x-2", method: :get) do %>
   <%= label_tag(:query, repository.translate.search_label, class: "sr-only") %>
+
   <div class="relative w-full">
-    <%= search_field_tag(:query, query, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500") %>
+    <%= search_field_tag(:query, query, class: "px-3 py-2.5 bg-neutral-secondary-medium border border-default-medium rounded-base text-heading text-sm focus:ring-brand focus:border-brand block w-full placeholder:text-body") %>
   </div>
-  <%= button_tag(class: "p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800") do %>
-    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+
+  <%= button_tag(class: "inline-flex items-center justify-center shrink-0 text-white bg-brand hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs rounded-base w-10 h-10 focus:outline-none") do %>
+    <svg
+      class="w-4 h-4"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 20 20"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+      />
     </svg>
+
     <span class="sr-only"><%= repository.translate.search_button %></span>
   <% end %>
 
@@ -16,6 +31,7 @@
     <%= hidden_field_tag("scope[inverse_of]", scope[:inverse_of]) %>
     <%= hidden_field_tag("scope[model]", scope[:model]) %>
   <% end %>
+
   <%= hidden_field_tag("sort[by]", sort_by) if sort_by? %>
   <%= hidden_field_tag("sort[direction]", sort_direction) if sort_direction? %>
 <% end %>

data/app/components/uchi/ui/navigation/navigation.html.erb

@@ -0,0 +1,9 @@
+<ul class="space-y-2 font-medium">
+  <% items.each do |item| %>
+    <li>
+      <%= link_to(item[:path], :class => "flex items-center py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group md:px-2") do %>
+        <span class="ms-3"><%= item[:label] %></span>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

data/app/components/uchi/ui/navigation.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    # Renders the main navigation menu visible at the side of the viewport.
+    #
+    # The template for this component has access to the following methods:
+    #
+    # - `items`: Returns an `Array` of `Hashes` containing :label and :path keys
+    #   for each item to render in the navigation.
+    # - `navigatable_repositories`: Returns an `Array` of `Uchi::Repository`
+    #   instances. The `Array` is sorted alphanumerically by the
+    #   `navigation_label` for each repository.
+    # - `repositories`: Returns an `Array` with an instance of each
+    #   `Uchi::Repository` in the application.
+    class Navigation < ViewComponent::Base
+      protected
+
+      def items
+        navigatable_repositories.map do |repository|
+          {
+            label: repository.translate.navigation_label,
+            path: repository.routes.path_for(:index)
+          }
+        end
+      end
+
+      def navigatable_repositories
+        repositories.sort_by { |repository| repository.translate.navigation_label.downcase }
+      end
+
+      def repositories
+        Uchi::Repository.all.map(&:new)
+      end
+    end
+  end
+end

data/app/components/uchi/ui/no_value/no_value.html.erb

@@ -0,0 +1 @@
+<span class="text-body-subtle">—</span>

data/app/components/uchi/ui/no_value.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    class NoValue < ViewComponent::Base
+    end
+  end
+end

data/app/components/uchi/ui/page_header/page_header.html.erb

@@ -1,15 +1,20 @@
-<header class="px-4 mb-6 space-y-6 md:px-0">
-  <div>
-    <% if breadcrumb? %>
+<header class="px-0 mb-6 space-y-6 md:px-0">
+  <% if breadcrumb? %>
+    <div class="px-2">
       <%= breadcrumb %>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 
-  <div class="items-start justify-between space-x-6 md:flex md:px-0">
+  <div class="items-start justify-between space-y-2 space-x-6 md:flex md:px-0 md:space-y-0">
     <div>
-      <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white group"><%= title %></h1>
+      <h1 class="px-1 text-3xl font-semibold tracking-tight text-heading group">
+        <%= title %>
+      </h1>
+
       <% if description.present? %>
-        <div class="text-lg text-gray-500 lg:mb-0 dark:text-gray-400 lg:max-w-2xl"><%= description %></div>
+        <div class="text-lg text-body-subtle lg:mb-0 lg:max-w-2xl">
+          <%= description %>
+        </div>
       <% end %>
     </div>
 

data/app/components/uchi/ui/pagination/current_link.html.erb

@@ -1,3 +1,3 @@
 <li>
-  <%= link_to(@paginator.page, page_url(page_number), aria: { current: "page" }, class: "z-10 flex items-center justify-center px-3 h-8 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white") %>
+  <%= link_to(@paginator.page, page_url(page_number), aria: { current: "page" }, class: "flex items-center justify-center text-fg-brand bg-neutral-tertiary-medium box-border border border-default-medium hover:text-fg-brand font-medium text-sm w-9 h-9 focus:outline-none") %>
 </li>

data/app/components/uchi/ui/pagination/gap.html.erb

@@ -1,3 +1,9 @@
-<li class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
+<li
+  class="
+    flex items-center justify-center text-body bg-neutral-secondary-medium
+    box-border border border-default-medium hover:bg-neutral-tertiary-medium
+    hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none
+  "
+>
   &hellip;
 </li>

data/app/components/uchi/ui/pagination/link.html.erb

@@ -1,3 +1,3 @@
 <li>
-  <%= link_to(page_number, page_url(page_number), class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white") %>
+  <%= link_to(page_number, page_url(page_number), class: "flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium text-sm w-9 h-9 focus:outline-none") %>
 </li>

data/app/components/uchi/ui/pagination/next_link.html.erb

@@ -1,8 +1,23 @@
 <li>
-  <%= link_to(url, class: "flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white") do %>
+  <%= link_to(url, class: "flex items-center justify-center text-body bg-neutral-secondary-medium box-border border border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading font-medium rounded-e-base text-sm w-9 h-9 focus:outline-none") do %>
     <span class="sr-only">Next</span>
-    <svg class="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+
+    <svg
+      class="w-4 h-4 rtl:rotate-180"
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="m9 5 7 7-7 7"
+      />
     </svg>
   <% end %>
 </li>

data/app/components/uchi/ui/pagination/pagination.html.erb

@@ -1,6 +1,7 @@
 <nav aria-label="<%= aria_label %>">
-  <ul class="flex items-center -space-x-px h-8 text-sm">
+  <ul class="flex -space-x-px text-sm">
     <%= render(Uchi::Ui::Pagination::PreviousLink.new(paginator: @paginator)) %>
+
     <% pages.each do |page_number| %>
       <% if page_number.nil? %>
         <%= render(Uchi::Ui::Pagination::Gap.new(page_number: page_number, paginator: @paginator)) %>
@@ -10,6 +11,7 @@
         <%= render(Uchi::Ui::Pagination::Link.new(page_number: page_number, paginator: @paginator)) %>
       <% end %>
     <% end %>
+
     <%= render(Uchi::Ui::Pagination::NextLink.new(paginator: @paginator)) %>
   </ul>
 </nav>