railsui 3.1.0

data/app/views/railsui/themes/hound/_nav.html.erb

@@ -0,0 +1,166 @@
+<div class="text-[14px] relative pb-4 pl-4">
+  <ul>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mb-1 text-[14px]">Content</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Typography", path:  systems_content_typography_path) %>
+
+        <%= system_nav_item(label: "Table", path:  systems_content_table_path) %>
+
+        <%= system_nav_item(label: "Icon", path:  systems_icons_path) %>
+
+        <%= system_nav_item(label: "Image", path:  systems_content_image_path) %>
+
+        <%= system_nav_item(label: "Scaffold", path:  systems_scaffolds_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Forms</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Input", path:  systems_forms_input_path) %>
+
+        <%= system_nav_item(label: "Input Group", path:  systems_forms_input_group_path) %>
+
+        <%= system_nav_item(label: "Select", path:  systems_forms_select_path) %>
+
+        <%= system_nav_item(label: "Checkbox", path:  systems_forms_checkbox_path) %>
+
+        <%= system_nav_item(label: "Radio", path:  systems_forms_radio_path) %>
+
+        <%= system_nav_item(label: "Switch", path:  systems_forms_switch_path) %>
+
+        <%= system_nav_item(label: "ActionText", path:  systems_forms_action_text_path) %>
+
+        <%= system_nav_item(label: "Validation", path:  systems_forms_validation_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Components</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+
+        <%= system_nav_item(label: "Accordion", path:  systems_components_accordion_path) %>
+
+        <%= system_nav_item(label: "Alert", path:  systems_components_alert_path) %>
+
+        <%= system_nav_item(label: "Avatar", path:  systems_components_avatar_path) %>
+
+        <%= system_nav_item(label: "Badge", path:  systems_components_badge_path) %>
+
+        <%= system_nav_item(label: "Breadcrumb", path:  systems_components_breadcrumb_path) %>
+
+        <%= system_nav_item(label: "Button", path:  systems_components_button_path) %>
+
+        <%= system_nav_item(label: "Card", path:  systems_components_card_path) %>
+
+        <%= system_nav_item(label: "Combobox", path:  systems_components_combobox_path) %>
+
+        <%= system_nav_item(label: "Dropdown", path:  systems_components_dropdown_path) %>
+
+        <%= system_nav_item(label: "Flash", path:  systems_components_flash_path) %>
+
+        <%= system_nav_item(label: "Modal", path:  systems_components_modal_path) %>
+
+        <%= system_nav_item(label: "Navigation", path:  systems_components_navigation_path) %>
+
+        <%= system_nav_item(label: "Pagination", path:  systems_components_pagination_path) %>
+
+        <%= system_nav_item(label: "Tab", path:  systems_components_tab_path) %>
+
+        <%= system_nav_item(label: "Toast", path:  systems_components_toast_path) %>
+
+        <%= system_nav_item(label: "Tooltip", path:  systems_components_tooltip_path) %>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Authentication</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_authentication_overview_path) %>
+      </ul>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "devise" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Devise</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_devise_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_devise_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_devise_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_devise_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_devise_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_devise_confirmation_path) %>
+
+            <%= system_nav_item(label: "Edit account", path:  systems_authentication_devise_edit_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_devise_unlocks_path) %>
+          </ul>
+        </details>
+
+        <details class="marker:content-[''] group" <%= "open" if controller_name == "static" %>>
+          <summary class="py-2 px-3 hover:bg-neutral-100/80 flex items-center justify-between dark:hover:bg-neutral-700/80">
+            <p class="font-medium">Static</p>
+            <%= icon "plus", class: "size-4 stroke-neutral-400 group-open:hidden" %>
+            <%= icon "minus", class: "size-4 stroke-neutral-400 hidden group-open:block" %>
+          </summary>
+          <ul class="ml-2">
+            <%= system_nav_item(label: "Overview", path:  systems_authentication_static_overview_path) %>
+
+            <%= system_nav_item(label: "Sign up", path:  systems_authentication_static_signup_path) %>
+
+            <%= system_nav_item(label: "Sign in", path:  systems_authentication_static_signin_path) %>
+
+            <%= system_nav_item(label: "Change password", path:  systems_authentication_static_change_password_path) %>
+
+            <%= system_nav_item(label: "Reset password", path: systems_authentication_static_reset_password_path) %>
+
+            <%= system_nav_item(label: "Confirmation", path:  systems_authentication_static_confirmation_path) %>
+
+            <%= system_nav_item(label: "Edit account", path:  systems_authentication_static_edit_path) %>
+
+            <%= system_nav_item(label: "Unlock", path:  systems_authentication_static_unlocks_path) %>
+          </ul>
+        </details>
+      </ul>
+    </li>
+
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Mailers</p>
+
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_mailers_overview_path) %>
+
+        <%= system_nav_item(label: "Layout", path:  systems_mailers_layout_path) %>
+
+        <%= system_nav_item(label: "Minimal", path:  systems_mailers_minimal_path) %>
+
+        <%= system_nav_item(label: "Promotion", path:  systems_mailers_promotion_path) %>
+
+        <%= system_nav_item(label: "Transactional", path:  systems_mailers_transactional_path) %>
+
+        <%= system_nav_item(label: "Devise", path:  systems_mailers_devise_path) %>
+      </ul>
+    </li>
+    <li>
+      <p class="font-medium px-3 py-2 dark:text-neutral-200 mt-4 mb-1 text-[14px]">Helpers</p>
+      <ul class="border-neutral-300/90 border-l dark:border-neutral-700 ml-3">
+        <%= system_nav_item(label: "Overview", path:  systems_helpers_overview_path) %>
+        <%= system_nav_item(label: "Icon", path:  systems_helpers_icon_path) %>
+        <%= system_nav_item(label: "Nav Link", path:  systems_helpers_nav_link_path) %>
+        <%= system_nav_item(label: "Email Action", path:  systems_helpers_email_action_path) %>
+        <%= system_nav_item(label: "Email Callout", path:  systems_helpers_email_callout_path) %>
+        <%= system_nav_item(label: "Email Spacer", path:  systems_helpers_spacer_path) %>
+        <%= system_nav_item(label: "Demo Avatar", path:  systems_helpers_demo_avatar_path) %>
+        <%= system_nav_item(label: "Rails UI Head", path:  systems_helpers_railsui_head_path) %>
+    </li>
+  </ul>
+</div>

data/app/views/railsui/themes/hound/_scaffolds.html.erb

@@ -0,0 +1,42 @@
+
+<div id="scaffolds-overview" class="prose dark:prose-invert my-6 max-w-full">
+  <p>Rails UI supplies pre-designed scaffolds in addition to the Rails defaults. To accomplish this you can run an alternative generator when scaffolding a new resource.</p>
+
+  <h3>Custom scaffold generator</h3>
+  <div class="not-prose">
+    <% content_for :bash, flush: true do %>
+    rails generate railsui:scaffold ModelName
+    <% end %>
+    <%= render_snippet active_tab: "bash" %>
+  </div>
+
+  <p>The custom scaffold generator performs the same function as the default but uses alternative view templates when generating. Below is an example of each template for the <%= Railsui.config.theme.humanize %> theme.</p>
+
+</div>
+
+<% content_for :bash, flush: true do %>
+
+<% end %>
+
+<%= render callout do %>
+  <p><strong>Note</strong>: Changing your Rails UI theme will not automatically update existing scaffolds to match the new theme.</p>
+<% end %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/index" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/show" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/new" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/edit" %>
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/scaffolds/partial" %>
+
+<%= system_pagination(prev_path: systems_content_image_path, prev_text: "Image", next_path: systems_forms_path, next_text: "Forms") %>
+
+<%= content_for :component_nav do %>
+  <%= render layout: "railsui/shared/component_nav", locals: { title: "On this page" } do %>
+    <%= component_link "Overview", "#scaffolds-overview" %>
+    <%= component_link "Index", "#scaffolds-index" %>
+		<%= component_link "Show", "#scaffolds-show" %>
+    <%= component_link "New", "#scaffolds-new" %>
+    <%= component_link "Edit", "#scaffolds-edit" %>
+    <%= component_link "Partial", "#scaffolds-partial" %>
+  <% end %>
+<% end %>

data/app/views/railsui/themes/hound/authentication/_overview.html.erb

@@ -0,0 +1,5 @@
+
+<%= render layout: "railsui/shared/linkables" do %>
+  <%= render "railsui/shared/linkable", path: systems_authentication_devise_overview_path, title: "Devise", description: "Ready-to-use authentication patterns for Devise installs." %>
+  <%= render "railsui/shared/linkable", path: systems_authentication_static_overview_path, title: "Static", description: "Ready-to-use authentication patterns for generic authentication." %>
+<% end %>

data/app/views/railsui/themes/hound/authentication/devise/_change_password.html.erb

@@ -0,0 +1,141 @@
+<%= render layout: example, locals: { heading: "Change password", section: "Authentication" } do %>
+<%= render preview 'gray' do %>
+  <div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_url('themes/hound/fusion.png') %>')">
+    <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
+      <div>
+        <div class="flex justify-center">
+          <%= link_to "#", class: "w-12 h-12 flex justify-center" do %>
+            <%= icon Railsui.config.theme, custom_path: engine_icon_path("themes/#{Railsui.config.theme}/logo.svg"), class: "w-10 h-auto fill-current text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500", variant: :solid %>
+            <span class="sr-only"><%= Railsui.config.application_name %></span>
+          <% end %>
+        </div>
+
+        <div class="mt-6">
+          <div class="text-center">
+            <h1 class="md:h3 h4 my-3">Change your password</h1>
+            <p class="mb-6 text-slate-700 dark:text-slate-200 max-w-sm mx-auto">Please enter a new password to update and secure your account.</p>
+          </div>
+        </div>
+
+        <div class="bg-white dark:bg-slate-900/50  dark:border-slate-700/80 shadow-xs rounded-lg p-8 border border-slate-300/60">
+
+          <form class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post">
+            <input type="hidden" name="_method" value="put" autocomplete="off"><input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+            <input autocomplete="off" type="hidden" value="R6ZdL9coz642z78qaqsr" name="user[reset_password_token]" id="user_reset_password_token">
+
+            <div class="form-group">
+              <label class="form-label" for="user_password">New password</label>
+              <div class="relative">
+                <input autofocus="autofocus" autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password]" id="user_password">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" role="img" aria-labelledby="ar71butxjb5gz2j6p7waghnh9oumt8mp"><title id="ar71butxjb5gz2j6p7waghnh9oumt8mp">Lock closed</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
+                </svg>
+
+              </div>
+              <p class="mt-1 text-xs text-slate-600 dark:text-slate-400">6 characters minimum</p>
+            </div>
+
+            <div class="form-group">
+              <label class="form-label" for="user_password_confirmation">Confirm new password</label>
+              <div class="relative">
+                <input autocomplete="new-password" class="form-input focus:pl-10 peer transition" type="password" name="user[password_confirmation]" id="user_password_confirmation">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" role="img" aria-labelledby="a81fu34qo8o330fc2psw0cp7g0a4madx"><title id="a81fu34qo8o330fc2psw0cp7g0a4madx">Lock closed</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"></path>
+                </svg>
+
+              </div>
+            </div>
+
+            <input type="submit" name="commit" value="Change password" class="btn btn-primary hover:cursor-pointer w-full" data-disable-with="Change password">
+          </form>
+        </div>
+
+        <div class="mt-4">
+          <div class="text-center mb-1">
+            <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="/users/confirmation/new">Didn't receive confirmation instructions?</a>
+          </div>
+
+          <div class="text-center mb-2">
+            <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="/users/unlock/new">Didn't receive unlock instructions?</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/passwords/edit.html.erb -->
+<%% content_for :masthead do %>
+<div class="text-center">
+  <h1 class="md:h3 h4 my-3">Change your password</h1>
+  <p class="mb-6 text-slate-700 dark:text-slate-200 max-w-sm mx-auto">Please enter a new password to update and secure your account.</p>
+</div>
+<%%= render "rui/shared/error_messages", resource: resource %>
+<%% end %>
+
+<%%= render "devise/auth_layout" do %>
+  <%%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+    <%%= f.hidden_field :reset_password_token %>
+
+    <div class="form-group">
+      <%%= f.label :password, "New password", class: "form-label" %>
+      <div class="relative">
+        <%%= f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
+        <%%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
+      </div>
+      <%% if @minimum_password_length %>
+      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400"><%%= @minimum_password_length %> characters minimum</p>
+      <%% end %>
+    </div>
+
+    <div class="form-group">
+      <%%= f.label :password_confirmation, "Confirm new password", class: "form-label" %>
+      <div class="relative">
+        <%%= f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition" %>
+        <%%= icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
+      </div>
+    </div>
+
+  <%%= f.submit "Change password", class: "btn btn-primary hover:cursor-pointer w-full"  %>
+  <%% end %>
+<%% end %>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/passwords/edit.haml.erb
+- content_for :masthead do
+  .text-center
+    %h1.md:h3.h4.my-3 Change your password
+    %p.mb-6.text-slate-700.dark:text-slate-200.max-w-sm.mx-auto Please enter a new password to update and secure your account.
+  = render "rui/shared/error_messages", resource: resource
+= render "rui/devise/auth_layout" do
+  = form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f|
+    = f.hidden_field :reset_password_token
+    .form-group
+      = f.label :password, "New password", class: "form-label"
+      .relative
+        = f.password_field :password, autofocus: true, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
+        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
+      - if @minimum_password_length
+        %p.mt-1.text-sm.text-slate-600.dark:text-slate-400
+          = @minimum_password_length
+          characters minimum
+    .form-group
+      = f.label :password_confirmation, "Confirm new password", class: "form-label"
+      .relative
+        = f.password_field :password_confirmation, autocomplete: "new-password", class: "form-input focus:pl-10 peer transition"
+        = icon "lock-closed", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
+    = f.submit "Change password", class: "btn btn-primary hover:cursor-pointer w-full"
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_signin_path, prev_text: "Sign in", next_path: systems_authentication_devise_reset_password_path, next_text: "Reset password") %>

data/app/views/railsui/themes/hound/authentication/devise/_confirmation.html.erb

@@ -0,0 +1,107 @@
+<%= render layout: example, locals: { heading: "Confirmation", section: "Authentication" } do %>
+<%= render preview 'gray' do %>
+  <div class="pointer-events-none select-none sm:h-[800px] min-h-[600px] sm:-m-8 -m-4 pt-10 sm:pt-0 flex flex-col items-center justify-center bg-cover bg-center px-4" style="background-image: url('<%= asset_path('themes/hound/fusion.png')%>')">
+    <div class="sm:flex-1 flex flex-col justify-center sm:w-[428px] w-full">
+      <div>
+        <div class="flex justify-center">
+          <%= link_to "#", class: "size-12 flex justify-center" do %>
+            <%= icon Railsui.config.theme, custom_path: engine_icon_path("themes/#{Railsui.config.theme}/logo.svg"), class: "w-10 h-auto fill-current text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out dark:hover:text-primary-500", variant: :solid %>
+            <span class="sr-only"><%= Railsui.config.application_name %></span>
+          <% end %>
+        </div>
+
+        <div class="mt-6">
+          <div class="text-center">
+            <h1 class="h4 my-3">Resend confirmation instuctions</h1>
+            <p class="mb-6 text-slate-700 dark:text-slate-200">Not get your confirmation email? <br class="sm:block hidden">
+              You've come to the right place.</p>
+          </div>
+        </div>
+
+        <div class="bg-white dark:bg-slate-900/50  dark:border-slate-700/80 shadow-xs rounded-lg p-8 border border-slate-300/60">
+
+          <form class="new_user" id="new_user" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="#" autocomplete="off">
+
+            <div class="form-group">
+              <label class="form-label" for="user_email">Email</label>
+              <div class="relative">
+                <input autocomplete="email" value="" class="form-input peer focus:pl-10 transition" pattern="[^@ ]+@[^@ ]+.[^@ ]+" title="Invalid email address" type="email" name="user[email]" id="user_email">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" role="img" aria-labelledby="a6dt3lf8fyqy8pivdxo8kxutpdzb0g86"><title id="a6dt3lf8fyqy8pivdxo8kxutpdzb0g86">Envelope</title>
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"></path>
+                </svg>
+
+              </div>
+            </div>
+
+            <input type="submit" name="commit" value="Resend confirmation instructions" class="btn btn-primary w-full" data-disable-with="Resend confirmation instructions">
+          </form>
+        </div>
+
+        <div class="mt-4">
+          <div class="text-center mb-2">
+            <a class="text-sm text-slate-600 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-500" href="/users/unlock/new">Didn't receive unlock instructions?</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<!-- app/views/devise/confirmations/new.html.erb -->
+<%% content_for :masthead do %>
+  <div class="text-center">
+    <h1 class="h4 my-3">Resend confirmation instuctions</h1>
+    <p class="mb-6 text-slate-700 dark:text-slate-200">Not get your confirmation email? <br class="sm:block hidden" />You've come to the right place.</p>
+  </div>
+
+  <%%= render "rui/shared/error_messages", resource: resource %>
+<%% end %>
+
+<%%= render "devise/auth_layout" do %>
+  <%%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+
+    <div class="form-group">
+      <%%= f.label :email, class: "form-label" %>
+      <div class="relative">
+        <%%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-input peer focus:pl-10 transition", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address" %>
+        <%%= icon "envelope", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400" %>
+      </div>
+    </div>
+
+    <%%= f.submit "Resend confirmation instructions", class: "btn btn-primary w-full" %>
+  <%% end %>
+<%% end %>
+
+<% end %>
+
+<% content_for :haml, flush: true do %>
+/ app/views/devise/confirmations/new.haml.erb
+- content_for :masthead do
+  .text-center
+    %h1.h4.my-3 Resend confirmation instuctions
+    %p.mb-6.text-slate-700.dark:text-slate-200
+      Not get your confirmation email?
+      = succeed "You've" do
+        %br.sm:block.hidden/
+  = render "rui/shared/error_messages", resource: resource
+= render "devise/auth_layout" do
+  = form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f|
+    .form-group
+      = f.label :email, class: "form-label"
+      .relative
+        = f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email), class: "form-input peer focus:pl-10 transition", pattern: "[^@\s]+@[^@\s]+\.[^@\s]+", title: "Invalid email address"
+        = icon "envelope", class: "size-5 absolute translate-x-0 top-3 text-slate-300 peer-focus:text-primary-500/80 opacity-0 transition transform peer-focus:opacity-100 peer-focus:translate-x-3 dark:peer-focus:text-primary-400"
+    = f.submit "Resend confirmation instructions", class: "btn btn-primary w-full"
+<% end %>
+
+<%= render_snippet active_tab: "erb", erb_filename: "new.html.erb", haml_filename: "new.haml.erb" %>
+<% end %>
+<% end %>
+
+<%= system_pagination(prev_path: systems_authentication_devise_reset_password_path, prev_text: "Reset password", next_path: systems_authentication_devise_edit_path, next_text: "Edit account") %>