railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/components/navigation/_chat.html.erb

@@ -0,0 +1,194 @@
+<div id="navigation-chat">
+  <%= render layout: example, locals: { heading: "Chat", section: "Navigation" } do %>
+
+    <div class="prose prose-neutral mb-6">
+      <p>Full functionality is available on the dedicated <%= link_to "chat page", rui_chat_new_path %>.</p>
+    </div>
+
+
+<div class="rounded-3xl bg-neutral-50/50 overflow-hidden border border-neutral-200 dark:border-neutral-700/80 font-tiktok">
+  <div class="flex h-full" data-controller="sidebar">
+    <!-- Sidebar -->
+    <%= render "rui/shared/sidebar" %>
+
+    <!-- Main Content -->
+    <div class="flex flex-col flex-1 min-w-0">
+      <!-- Header -->
+      <header class="p-6 shrink-0 md:static sticky top-0">
+        <div class="flex items-center justify-between md:justify-end gap-6">
+          <aside class="md:hidden flex items-center justify-between gap-6 flex-1">
+            <a href="/" class="block shrink-0">
+              <%= icon "logo", class: "size-6 shrink-0 fill-current dark:fill-neutral-100", custom_path: "/railsui/logo.svg" %>
+            </a>
+
+            <div class="flex items-center gap-4">
+              <a href="#"
+                class="rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80 dark:focus:ring-neutral-700/90">
+                <%= icon "pencil-square", class: "size-6 stroke-current shrink-0" %>
+              </a>
+
+              <div data-controller="railsui-dropdown">
+                <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80
+                dark:focus:ring-neutral-700/90">
+                  <%= icon "queue-list", class: "size-6 stroke-current shrink-0" %>
+                </button>
+
+                <ul
+                  class="hidden fixed inset-0 h-full w-full bg-neutral-100/80 backdrop-blur-lg z-10 pt-10 overflow-y-auto pb-32 dark:bg-neutral-900/90"
+                  data-railsui-dropdown-target="menu"
+                  data-transition-enter-active="transition ease-out duration-50"
+                  data-transition-enter-from="transform opacity-0 scale-95"
+                  data-transition-enter-to="transform opacity-100 scale-100"
+                  data-transition-leave-active="transition ease-in duration-100"
+                  data-transition-leave-from="transform opacity-100 scale-100"
+                  data-transition-leave-to="transform opacity-0 scale-95"
+                >
+                  <button data-action="click->railsui-dropdown#toggle" class="absolute top-4 right-4 z-40">
+                    <%= icon "x-mark", class: "size-8 stroke-current stroke-neutral-600 dark:stroke-neutral-400" %>
+                  </button>
+                  <div class="overflow-y-auto">
+                    <%= render "rui/shared/chat/history" %>
+                  </div>
+                </ul>
+              </div>
+            </div>
+          </aside>
+        <%= render "rui/shared/account_dropdown" %>
+        </div>
+      </header>
+      <div class="flex flex-col justify-center flex-1 min-h-0">
+        <div class="flex flex-col justify-center flex-1">
+          <div class="flex justify-center mb-10">
+            <svg class="w-14 h-14 fill-current text-neutral-200/70 dark:text-neutral-900" width="333" height="325" viewBox="0 0 333 325" xmlns="http://www.w3.org/2000/svg"><path d="M332.64 279.04L326.88 273.28L316.32 281.44C306.08 271.52 297.76 257.28 291.36 238.72C282.72 213.44 276 196.64 271.2 188.32C259.36 168.8 241.28 151.68 216.96 136.96L284.16 88.96L259.68 55.36C251.04 43.52 243.2 32.96 236.16 23.68C229.44 14.4 223.52 6.55999 218.4 0.159975L132.96 56.8C131.36 40.48 125.76 27.36 116.16 17.44C106.56 7.19998 93.6 2.07998 77.28 2.07998C55.2 2.07998 34.72 10.08 15.84 26.08V32.32C29.28 28.8 39.52 27.04 46.56 27.04C73.12 27.04 86.24 41.92 85.92 71.68L85.44 92.32L7.68 150.4C60.48 176.32 86.88 209.92 86.88 251.2C51.36 262.08 22.4 282.4 0 312.16L0.48 314.56C36.96 300.8 68 293.92 93.6 293.92C96.8 293.92 99.84 294.08 102.72 294.4C105.92 294.4 108.8 294.56 111.36 294.88C125.12 296.48 138.72 300.96 152.16 308.32C154.72 309.92 158.24 312 162.72 314.56C167.2 317.12 172.64 320.32 179.04 324.16L228 274.72L221.76 268.48L211.68 277.6C197.92 269.6 183.2 262.88 167.52 257.44V174.4C189.92 174.4 207.52 184.16 220.32 203.68C224.8 210.4 234.08 231.04 248.16 265.6C259.04 292.48 271.04 311.04 284.16 321.28H288.96L332.64 279.04ZM236.64 111.04L167.52 161.92V45.28L182.4 35.2L236.64 111.04ZM157.44 254.08C150.72 252.16 143.52 251.2 135.84 251.2V67.36L157.44 52.96V254.08ZM84.96 158.08L48.96 129.28L84.96 105.28V158.08Z"></path>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="rounded-3xl bg-neutral-50/50 overflow-hidden border border-neutral-200 dark:border-neutral-700/80">
+  <div class="flex h-full" data-controller="sidebar">
+    <!-- Sidebar -->
+    <div class="sidebar"><!-- Sidebar content --></div>
+
+    <!-- Main Content -->
+    <div class="flex flex-col flex-1 min-w-0">
+      <!-- Header -->
+      <header class="p-6 shrink-0 md:static sticky top-0">
+        <div class="flex items-center justify-between md:justify-end gap-6">
+          <aside class="md:hidden flex items-center justify-between gap-6 flex-1">
+            <a href="/" class="block shrink-0">
+              <svg><!-- logo icon --></svg>
+            </a>
+
+            <div class="flex items-center gap-4">
+              <a href="#" class="rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80 dark:focus:ring-neutral-700/90">
+                <svg><!-- pencil icon --></svg>
+              </a>
+
+              <div data-controller="railsui-dropdown">
+                <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80 dark:focus:ring-neutral-700/90">
+                  <svg><!-- queue-list icon --></svg>
+                </button>
+
+                <ul class="hidden fixed inset-0 h-full w-full bg-neutral-100/80 backdrop-blur-lg z-10 pt-10 overflow-y-auto pb-32 dark:bg-neutral-900/90" data-railsui-dropdown-target="menu" data-transition-enter-active="transition ease-out duration-50" data-transition-enter-from="transform opacity-0 scale-95" data-transition-enter-to="transform opacity-100 scale-100" data-transition-leave-active="transition ease-in duration-100" data-transition-leave-from="transform opacity-100 scale-100" data-transition-leave-to="transform opacity-0 scale-95">
+                  <button data-action="click->railsui-dropdown#toggle" class="absolute top-4 right-4 z-40">
+                    <svg><!-- x-mark icon --></svg>
+                  </button>
+                  <div class="overflow-y-auto">
+                    <!-- Chat history -->
+                  </div>
+                </ul>
+              </div>
+            </div>
+          </aside>
+          <!-- Account dropdown -->
+        </div>
+      </header>
+      <div class="flex flex-col justify-center flex-1 min-h-0">
+        <div class="flex flex-col justify-center flex-1">
+          <div class="flex justify-center mb-10">
+            <svg class="w-14 h-14 fill-current text-neutral-200/70 dark:text-neutral-900" width="333" height="325" viewBox="0 0 333 325" xmlns="http://www.w3.org/2000/svg"><path d="M332.64 279.04L326.88 273.28L316.32 281.44C306.08 271.52 297.76 257.28 291.36 238.72C282.72 213.44 276 196.64 271.2 188.32C259.36 168.8 241.28 151.68 216.96 136.96L284.16 88.96L259.68 55.36C251.04 43.52 243.2 32.96 236.16 23.68C229.44 14.4 223.52 6.55999 218.4 0.159975L132.96 56.8C131.36 40.48 125.76 27.36 116.16 17.44C106.56 7.19998 93.6 2.07998 77.28 2.07998C55.2 2.07998 34.72 10.08 15.84 26.08V32.32C29.28 28.8 39.52 27.04 46.56 27.04C73.12 27.04 86.24 41.92 85.92 71.68L85.44 92.32L7.68 150.4C60.48 176.32 86.88 209.92 86.88 251.2C51.36 262.08 22.4 282.4 0 312.16L0.48 314.56C36.96 300.8 68 293.92 93.6 293.92C96.8 293.92 99.84 294.08 102.72 294.4C105.92 294.4 108.8 294.56 111.36 294.88C125.12 296.48 138.72 300.96 152.16 308.32C154.72 309.92 158.24 312 162.72 314.56C167.2 317.12 172.64 320.32 179.04 324.16L228 274.72L221.76 268.48L211.68 277.6C197.92 269.6 183.2 262.88 167.52 257.44V174.4C189.92 174.4 207.52 184.16 220.32 203.68C224.8 210.4 234.08 231.04 248.16 265.6C259.04 292.48 271.04 311.04 284.16 321.28H288.96L332.64 279.04ZM236.64 111.04L167.52 161.92V45.28L182.4 35.2L236.64 111.04ZM157.44 254.08C150.72 252.16 143.52 251.2 135.84 251.2V67.36L157.44 52.96V254.08ZM84.96 158.08L48.96 129.28L84.96 105.28V158.08Z"></path></svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="rounded-3xl bg-neutral-50/50 overflow-hidden border border-neutral-200 dark:border-neutral-700/80">
+  <div class="flex h-full" data-controller="sidebar">
+  <!-- Sidebar -->
+  <%%= render "rui/shared/sidebar" %>
+
+  <!-- Main Content -->
+  <div class="flex flex-col flex-1 min-w-0">
+    <!-- Header -->
+    <header class="p-6 shrink-0 md:static sticky top-0">
+      <div class="flex items-center justify-between md:justify-end gap-6">
+        <aside class="md:hidden flex items-center justify-between gap-6 flex-1">
+          <%%= link_to root_path, class: "block" do %>
+            <%%= icon "logo", class: "size-6 shrink-0 fill-current dark:fill-neutral-100", custom_path: "/railsui/logo.svg" %>
+          <%% end %>
+
+          <div class="flex items-center gap-4">
+            <%%= link_to "#", class: "rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80 dark:focus:ring-neutral-700/90" do %>
+              <%%= icon "pencil-square", class: "size-6 stroke-current shrink-0" %>
+            <%% end %>
+
+            <div data-controller="railsui-dropdown">
+              <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="rounded-full size-8 focus:bg-neutral-200 flex items-center justify-center focus:ring-4 focus:ring-neutral-200/80
+              dark:focus:ring-neutral-700/90">
+                <%%= icon "queue-list", class: "size-6 stroke-current shrink-0" %>
+              </button>
+
+              <ul
+                class="hidden fixed inset-0 h-full w-full bg-neutral-100/80 backdrop-blur-lg z-10 pt-10 overflow-y-auto pb-32 dark:bg-neutral-900/90"
+                data-railsui-dropdown-target="menu"
+                data-transition-enter-active="transition ease-out duration-50"
+                data-transition-enter-from="transform opacity-0 scale-95"
+                data-transition-enter-to="transform opacity-100 scale-100"
+                data-transition-leave-active="transition ease-in duration-100"
+                data-transition-leave-from="transform opacity-100 scale-100"
+                data-transition-leave-to="transform opacity-0 scale-95"
+              >
+                <button data-action="click->railsui-dropdown#toggle" class="absolute top-4 right-4 z-40">
+                  <%%= icon "x-mark", class: "size-8 stroke-current stroke-neutral-600 dark:stroke-neutral-400" %>
+                </button>
+                <div class="overflow-y-auto">
+                  <%%= render "rui/shared/chat/history" %>
+                </div>
+              </ul>
+            </div>
+          </div>
+        </aside>
+      <%%= render "rui/shared/account_dropdown" %>
+      </div>
+    </header>
+    <div class="flex flex-col justify-center flex-1 min-h-0">
+      <div class="flex flex-col justify-center flex-1">
+        <div class="flex justify-center mb-10">
+          <%%= icon "logo", class: "w-14 h-14 fill-current text-neutral-200/70 dark:text-neutral-900", custom_path: "/railsui/logo.svg" %>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :js, flush: true do  %>
+
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/navigation/_nav_preview.html.erb

@@ -0,0 +1,9 @@
+<div class="rounded-lg border min-h-[200px] rounded-t-2xl relative shadow-inner <%= local_assigns[:dark] == true ? "border-neutral-700 bg-neutral-800" : "dark:border-neutral-700 dark:bg-neutral-800 border-neutral-200 bg-neutral-50"  %>">
+  <div class="w-full border-b  <%= local_assigns[:dark] == true ? "rounded-t border-neutral-700": "border-neutral-200 rounded-t dark:border-neutral-700" %>">
+    <%= yield %>
+  </div>
+  <span class="absolute top-[50%] -mb-7 left-[50%] -ml-7">
+    <svg class="w-14 h-14 fill-current <%= local_assigns[:dark] == true ? "text-neutral-900/50" : "text-neutral-200/70 dark:text-neutral-900" %>" width="333" height="325" viewBox="0 0 333 325" xmlns="http://www.w3.org/2000/svg"><path d="M332.64 279.04L326.88 273.28L316.32 281.44C306.08 271.52 297.76 257.28 291.36 238.72C282.72 213.44 276 196.64 271.2 188.32C259.36 168.8 241.28 151.68 216.96 136.96L284.16 88.96L259.68 55.36C251.04 43.52 243.2 32.96 236.16 23.68C229.44 14.4 223.52 6.55999 218.4 0.159975L132.96 56.8C131.36 40.48 125.76 27.36 116.16 17.44C106.56 7.19998 93.6 2.07998 77.28 2.07998C55.2 2.07998 34.72 10.08 15.84 26.08V32.32C29.28 28.8 39.52 27.04 46.56 27.04C73.12 27.04 86.24 41.92 85.92 71.68L85.44 92.32L7.68 150.4C60.48 176.32 86.88 209.92 86.88 251.2C51.36 262.08 22.4 282.4 0 312.16L0.48 314.56C36.96 300.8 68 293.92 93.6 293.92C96.8 293.92 99.84 294.08 102.72 294.4C105.92 294.4 108.8 294.56 111.36 294.88C125.12 296.48 138.72 300.96 152.16 308.32C154.72 309.92 158.24 312 162.72 314.56C167.2 317.12 172.64 320.32 179.04 324.16L228 274.72L221.76 268.48L211.68 277.6C197.92 269.6 183.2 262.88 167.52 257.44V174.4C189.92 174.4 207.52 184.16 220.32 203.68C224.8 210.4 234.08 231.04 248.16 265.6C259.04 292.48 271.04 311.04 284.16 321.28H288.96L332.64 279.04ZM236.64 111.04L167.52 161.92V45.28L182.4 35.2L236.64 111.04ZM157.44 254.08C150.72 252.16 143.52 251.2 135.84 251.2V67.36L157.44 52.96V254.08ZM84.96 158.08L48.96 129.28L84.96 105.28V158.08Z"/>
+    </svg>
+  </span>
+</div>

data/app/views/railsui/themes/corgie/components/pagination/_contained.html.erb

@@ -0,0 +1,131 @@
+<div id="pagination-contained">
+<%= render layout: example, locals: { heading: "Contained", section: "Pagination" } do %>
+
+<%= render preview('neutral') do %>
+<div class="flex flex-wrap md:justify-between justify-center items-center space-y-2 font-tiktok">
+  <p class="text-neutral-600 dark:text-neutral-200 text-sm block w-full md:w-auto md:text-left text-center">Viewing page <strong>1</strong> with <strong>24</strong> results per page</p>
+  <nav aria-label="Page navgiation" class="text-neutral-500 dark:text-neutral-200 md:text-sm text-base font-medium w-auto flex">
+    <ul class="flex flex-wrap items-center justify-center w-auto divide-x divide-neutral-300 shadow-xs dark:divide-neutral-600">
+      <li class="flex justify-start items-center">
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">
+          <%= icon "arrow-small-left", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Previous" %>
+        </a>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500">1</a>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">2</a>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">3</a>
+      </li>
+      <li class="md:block hidden">
+        <span href="#" class="bg-white inline-flex items-center py-2 px-3 border-y border-neutral-300 select-none pointer-events-nonehover:bg-neutral-50/50 dark:bg-neutral-800 dark:border-neutral-600">&hellip;</span>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">8</a>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">9</a>
+      </li>
+      <li>
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">10</a>
+      </li>
+      <li class="flex justify-end items-center">
+        <a data-controller="railsui-prevent" data-action="click->railsui-prevent#prevent" href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">
+          <%= icon "arrow-small-right", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Next" %>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<% end %>
+
+<%= content_for :example, flush: true do %>
+<%= content_for :html, flush: true do %>
+<div class="flex flex-wrap md:justify-between justify-center items-center space-y-2">
+  <p class="text-neutral-600 dark:text-neutral-200 text-sm block w-full md:w-auto md:text-left text-center">Viewing page <strong>1</strong> with <strong>24</strong> results per page</p>
+  <nav aria-label="Page navgiation" class="text-neutral-500 dark:text-neutral-200 md:text-sm text-base font-medium w-auto flex">
+    <ul class="flex flex-wrap items-center justify-center w-auto divide-x divide-neutral-300 shadow-xs dark:divide-neutral-600">
+      <li class="flex justify-start items-center">
+        <a href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">
+          <%%= icon "arrow-small-left", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Previous" %>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500">1</a>
+      </li>
+      <li>
+        <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">2</a>
+      </li>
+      <li>
+        <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">3</a>
+      </li>
+      <li class="md:block hidden">
+        <span href="#" class="bg-white inline-flex items-center py-2 px-3 border-y border-neutral-300 select-none pointer-events-nonehover:bg-neutral-50/50 dark:bg-neutral-800 dark:border-neutral-600">&hellip;</span>
+      </li>
+      <li>
+        <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">8</a>
+      </li>
+      <li>
+        <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">9</a>
+      </li>
+      <li>
+        <a href="#" class="bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">10</a>
+      </li>
+      <li class="flex justify-end items-center">
+        <a href="#" class="bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600">
+          <%%= icon "arrow-small-right", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Next" %>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
+<% end %>
+
+<%= content_for :erb, flush: true do %>
+<div class="flex flex-wrap md:justify-between justify-center items-center space-y-2">
+  <p class="text-neutral-600 dark:text-neutral-200 text-sm block w-full md:w-auto md:text-left text-center">Viewing page <strong>1</strong> with <strong>24</strong> results per page</p>
+  <nav aria-label="Page navgiation" class="text-neutral-500 dark:text-neutral-200 md:text-sm text-base font-medium w-auto flex">
+    <ul class="flex flex-wrap items-center justify-center w-auto divide-x divide-neutral-300 shadow-xs dark:divide-neutral-600">
+      <li class="flex justify-start items-center">
+        <%%= link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-l hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-l border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" do %>
+          <%%= icon "arrow-small-left", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Previous" %>
+        <%% end %>
+      </li>
+      <li>
+        <%%= link_to "1", "#", class: "inline-flex items-center py-2 px-4 bg-primary-600 text-white hover:bg-primary-700 border-y border-primary-600 hover:border-primary-700 dark:hover:bg-primary-500" %>
+      </li>
+      <li>
+        <%%= link_to "2", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" %>
+      </li>
+      <li>
+        <%%= link_to "3", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" %>
+      </li>
+      <li class="md:block hidden">
+        <span href="#" class="bg-white inline-flex items-center py-2 px-3 border-y border-neutral-300 select-none pointer-events-nonehover:bg-neutral-50/50 dark:bg-neutral-800 dark:border-neutral-600">&hellip;</span>
+      </li>
+      <li>
+        <%%= link_to "8", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" %>
+      </li>
+      <li>
+        <%%= link_to "9", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" %>
+      </li>
+      <li>
+        <%%= link_to "10", "#", class: "bg-white inline-flex items-center py-2 px-4 border-y border-neutral-300 hover:bg-neutral-50/50 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" %>
+      </li>
+      <li class="flex justify-end items-center">
+        <%%= link_to "#", class: "bg-white inline-flex justify-center items-center md:py-2 py-[.63rem] px-2 rounded-r hover:bg-neutral-50/50 group hover:text-primary-600 md:w-auto w-full border-y border-r border-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:border-neutral-600" do %>
+          <%%= icon "arrow-small-right", class: "w-5 h-5 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200", title: "Next" %>
+        <%% end %>
+      </li>
+    </ul>
+  </nav>
+</div>
+<% end %>
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/pagination/_pagy.html.erb

@@ -0,0 +1,97 @@
+<div id="pagination-pagy">
+<%= render layout: example, locals: { heading: "Pagy gem", section: "Pagination" } do %>
+
+  <div class="prose prose-slate dark:prose-invert my-6">
+    <p><%= link_to "Pagy", "https://github.com/ddnexus/pagy", target: :_blank %> is a popular pagination solution for Ruby/Rails developers. This implementation uses Pagy's default <code>pagy_nav</code> helper with custom CSS styling to match the Rails UI button design system.</p>
+
+    <p>To use this design, include the CSS styles in your stylesheet and use the simple ERB snippet below. The <code>@pagy</code> instance variable should be passed to your view from the controller.</p>
+
+    <p>The CSS overrides Pagy's default styling using Tailwind's <code>@apply</code> directive to apply Rails UI button classes while maintaining all of Pagy's built-in functionality.</p>
+  </div>
+
+<%= render preview('neutral') do %>
+  <div class="flex justify-center mt-16">
+    <nav class="flex gap-2 items-center" aria-label="Pagination">
+      <a href="#" class="btn btn-white size-10">
+        <span class="sr-only">Previous</span>
+        <%= icon "chevron-left", class: "size-5" %>
+      </a>
+      <a href="#" class="btn btn-primary dark:bg-black dark:shadow-sm size-10">1</a>
+      <a href="#" class="btn btn-white size-10">2</a>
+      <a href="#" class="btn btn-white size-10">3</a>
+      <span class="btn btn-white size-10 pointer-events-none cursor-none">...</span>
+      <a href="#" class="btn btn-white size-10">8</a>
+      <a href="#" class="btn btn-white size-10">
+        <span class="sr-only">Next</span>
+        <%= icon "chevron-right", class: "size-5" %>
+      </a>
+    </nav>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="flex justify-center mt-16">
+  <%%== pagy_nav(pagy) %>
+</div>
+<% end %>
+
+<% content_for :css, flush: true do %>
+/* Custom Pagy Styles - Override defaults with button-style design */
+.pagy nav {
+  @apply flex gap-2 items-center;
+}
+
+.pagy nav a,
+.pagy nav span {
+  @apply btn btn-white size-10 justify-center items-center;
+}
+
+.pagy nav a.current {
+  @apply btn-primary dark:bg-black dark:shadow-sm;
+}
+
+.pagy nav span.gap {
+  @apply pointer-events-none cursor-none;
+}
+
+.pagy nav a:disabled,
+.pagy nav span:disabled {
+  @apply opacity-50 pointer-events-none cursor-not-allowed;
+}
+
+/* Hide default text content for prev/next, use icons instead */
+.pagy nav a[aria-label*="prev"]::after {
+  content: "‹";
+  @apply text-lg font-bold;
+}
+
+.pagy nav a[aria-label*="next"]::after {
+  content: "›";
+  @apply text-lg font-bold;
+}
+
+.pagy nav a[aria-label*="prev"],
+.pagy nav a[aria-label*="next"] {
+  text-indent: -9999px;
+  position: relative;
+}
+
+.pagy nav a[aria-label*="prev"]::after,
+.pagy nav a[aria-label*="next"]::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-indent: 0;
+}
+<% end %>
+
+<%= render_snippet active_tab: "css" %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/pagination/_simple.html.erb

@@ -0,0 +1,114 @@
+<div id="pagination-simple">
+<%= render layout: example, locals: { heading: "Simple", section: "Pagination" } do %>
+
+<%= render preview('neutral') do %>
+<div class="flex justify-center mt-16">
+  <nav class="flex gap-2 items-center" aria-label="Pagination">
+    <a href="#" class="btn btn-white size-10">
+      <span class="sr-only">Previous</span>
+      <%= icon "chevron-left", class: "size-5" %>
+    </a>
+    <a href="#" class="btn btn-primary dark:bg-black dark:shadow-sm size-10">1</a>
+    <a href="#" class="btn btn-white size-10">2</a>
+    <a href="#" class="btn btn-white size-10">3</a>
+    <span class="btn btn-white size-10 pointer-events-none cursor-none">...</span>
+    <a href="#" class="btn btn-white size-10">8</a>
+    <a href="#" class="btn btn-white size-10">
+      <span class="sr-only">Next</span>
+      <%= icon "chevron-right", class: "size-5" %>
+    </a>
+  </nav>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true  do %>
+<nav aria-label="Page navgiation" class="text-neutral-500 sm:text-sm text-base font-medium dark:text-neutral-300">
+  <ul class="flex flex-wrap items-center sm:justify-between justify-center">
+    <li class="flex-1 flex justify-start items-center sm:w-auto w-full">
+      <a href="#" class="flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-neutral-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-neutral-50 sm:mb-0 mb-3 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">
+        <%%= icon "arrow-small-left", class: "w-4 h-4 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200" %>
+        <span>Previous</span>
+      </a>
+    </li>
+    <div class="flex items-center justify-center sm:w-auto w-full sm:text-sm text-lg">
+      <li>
+        <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">1</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30">2</a>
+      </li>
+      <li>
+        <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">3</a>
+      </li>
+      <li>
+        <span href="#" class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none">&hellip;</span>
+      </li>
+       <li>
+        <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">8</a>
+      </li>
+       <li>
+        <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">9</a>
+      </li>
+       <li>
+        <a href="#" class="py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">10</a>
+      </li>
+
+    </div>
+    <li class="flex-1 flex justify-end items-center">
+      <a href="#" class="flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-neutral-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-neutral-50 sm:mt-0 mt-3 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200">
+        <span>Next</span>
+        <%%= icon "arrow-small-right", class: "w-4 h-4 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200" %>
+      </a>
+    </li>
+  </ul>
+</nav>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<nav aria-label="Page navgiation" class="text-neutral-500 sm:text-sm text-base font-medium dark:text-neutral-300">
+  <ul class="flex flex-wrap items-center sm:justify-between justify-center">
+    <li class="flex-1 flex justify-start items-center sm:w-auto w-full">
+      <%%= link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-neutral-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-neutral-50 sm:mb-0 mb-3 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+        <%%= icon "arrow-small-left", class: "w-4 h-4 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200" %>
+        <span>Previous</span>
+      <%% end %>
+    </li>
+    <div class="flex items-center justify-center sm:w-auto w-full sm:text-sm text-lg">
+      <li>
+        <%%= link_to "1", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+      </li>
+      <li>
+        <%%= link_to "2", "#", class:"py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30" %>
+      </li>
+      <li>
+        <%%= link_to "3", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+      </li>
+      <li>
+        <span href="#" class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none">&hellip;</span>
+      </li>
+      <li>
+        <%%= link_to "8", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+      </li>
+      <li>
+        <%%= link_to "9", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+      </li>
+      <li>
+        <%%= link_to "10", "#", class:"py-2 px-4 block border-t-2 border-transparent rounded hover:bg-neutral-50/50 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" %>
+      </li>
+    </div>
+    <li class="flex-1 flex justify-end items-center">
+      <%%= link_to "#", class: "flex justify-center items-center space-x-2 py-2 px-4 rounded hover:bg-neutral-50/50 group hover:text-primary-600 sm:w-auto w-full sm:bg-transparent bg-neutral-50 sm:mt-0 mt-3 dark:hover:bg-neutral-500/30 dark:hover:text-neutral-200" do %>
+        <span>Next</span>
+        <%%= icon "arrow-small-right", class: "w-4 h-4 text-neutral-400 group-hover:text-primary-500 dark:group-hover:text-neutral-200" %>
+      <%% end %>
+    </li>
+  </ul>
+</nav>
+<% end %>
+
+
+<%= render_snippet %>
+<% end %>
+<% end %>
+</div>