railsui 3.1.0

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/settings.html.erb

@@ -0,0 +1,66 @@
+<% content_for :body_classes, "text-slate-800 dark:bg-slate-900 dark:text-slate-100 bg-white" %>
+
+<% content_for :header do%>
+  <%= render "rui/shared/admin/nav", { header_title: "Account" } %>
+<% end %>
+
+<%= render "rui/shared/admin/settings_nav" %>
+
+<div class="container mx-auto pb-24 px-4 my-16">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="mb-2 md:h2 h3">Account</h1>
+    <div class="prose-lg prose-slate dark:prose-invert mb-16">
+      <p>Take control of your account.</p>
+    </div>
+
+    <h3 class="h6 mb-6">Profile</h3>
+
+    <%= form_tag("#", method: "post") do %>
+      <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-x-16 sm:gap-y-10 gap-6 items-center">
+        <div>
+          <%= label_tag :name, "Name", class: "form-label" %>
+          <%= text_field_tag :name, nil, class: "form-input" %>
+        </div>
+        <div>
+          <div class="flex items-center space-x-6 form-group">
+            <div class="shrink-0">
+              <%= image_tag demo_avatar_url, class: "h-16 w-16 object-cover rounded-full border-2 border-slate-100 dark:border-slate-600 shadow-inner", alt: "John Smith" %>
+            </div>
+            <%= label_tag :avatar, class: "block" do %>
+              <span class="sr-only">Choose profile photo</span>
+              <%= file_field_tag :avatar, class: "form-file" %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+
+      <hr class="my-10 dark:border-slate-600">
+
+      <h3 class="h6 mb-6">Personal information</h3>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 sm:gap-x-16 sm:gap-y-10 gap-6 items-center">
+        <div>
+          <%= label_tag :email, "Email", class: "form-label" %>
+          <%= email_field_tag :email, nil, placeholder: "email@example.com", class: "form-input" %>
+        </div>
+        <div>
+          <%= label_tag :password, "Password", class: "form-label" %>
+          <%= password_field_tag :password, nil, class: "form-input" %>
+        </div>
+        <div>
+          <%= label_tag :password_confirmation, "Password confirmation", class: "form-label" %>
+          <%= password_field_tag :password_confirmation, nil, class: "form-input" %>
+        </div>
+        <div>
+          <%= label_tag :current_password, "Current password", class: "form-label" %>
+          <%= password_field_tag :current_password, nil, class: "form-input" %>
+        </div>
+      </div>
+
+      <div class="border-t py-6 mt-10 flex items-center gap-4 dark:border-slate-600">
+        <%= submit_tag "Update", class: "btn btn-primary" %>
+        <%= link_to "Cancel", "#", class: "font-medium text-slate-600 hover:text-primary-600 text-sm px-2 py-2 dark:text-slate-400 dark:hover:text-primary-400" %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/team.html.erb

@@ -0,0 +1,200 @@
+<% content_for :body_classes, "text-slate-800 dark:bg-slate-900 dark:text-slate-100 bg-white" %>
+
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav", { header_title: "Team" } %>
+<% end %>
+
+<%= render "rui/shared/admin/settings_nav" %>
+
+<div class="container mx-auto pb-24 px-4 my-16">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="md:h2 h3 mb-2">Team</h1>
+    <div class="prose-lg prose-slate dark:prose-invert mb-6">
+      <p>Team management made simple and stress-free.</p>
+    </div>
+
+    <div class="flex items-center justify-between py-2 mb-4">
+      <%= form_tag("#") do %>
+        <%= text_field_tag(:search, nil, type: :search, placeholder: "Search team members", class: "form-input min-w-[300px] text-sm shadow-none bg-slate-100/50 border-slate-50 dark:bg-slate-800 dark:border-slate-700") %>
+      <% end %>
+
+      <div class="flex items-center space-x-1">
+        <button type="button" class="group px-3 py-1 hover:bg-slate-50 rounded dark:hover:bg-slate-700">
+          <%= icon "bars-arrow-up", class: "size-5 text-slate-500 group-hover:text-primary-500 stroke-current dark:group-hover:text-primary-400 dark:text-slate-400" %>
+        </button>
+        <button type="button" class="group px-3 py-1 hover:bg-slate-50 rounded dark:hover:bg-slate-700">
+          <%= icon "bars-arrow-down", class: "size-5 text-slate-500 group-hover:text-primary-500 stroke-current dark:group-hover:text-primary-400 dark:text-slate-400" %>
+        </button>
+      </div>
+    </div>
+
+    <ul class="divide-y divide-slate-300/80 mb-10 dark:divide-slate-700">
+      <% [
+      {
+          img: { id: "32", variant: "women" },
+          name: "Jennifer Thompson",
+          username: "@jthompson",
+          date: "Jan 01, 2023",
+          role: "Sales Lead",
+          report: "John Smith"
+        },
+        {
+          img: { id: "42", variant: "women" },
+          name: "Emily Wilson",
+          username: "@ewilson",
+          date: "Feb 10, 2023",
+          role: "Sales Associate",
+          report: "Michael Johnson"
+        },
+        {
+          img: { id: "46", variant: "men" },
+          name: "David Roberts",
+          username: "@droberts",
+          date: "Mar 05, 2023",
+          role: "Sales Representative",
+          report: "Sarah Davis"
+        },
+        {
+          img: { id: "16", variant: "women" },
+          name: "Samantha Reed",
+          username: "@sreed",
+          date: "Apr 22, 2023",
+          role: "Sales Lead",
+          report: "Daniel Thompson"
+        },
+        {
+          img: { id: "59", variant: "men" },
+          name: "Brian Johnson",
+          username: "@bjohnson",
+          date: "May 17, 2023",
+          role: "Sales Associate",
+          report: "Jennifer Thompson"
+        },
+        {
+          img: { id: "71", variant: "women" },
+          name: "Olivia Green",
+          username: "@ogreen",
+          date: "Jun 08, 2023",
+          role: "Sales Representative",
+          report: "Emily Wilson"
+        },
+        {
+          img: { id: "71", variant: "men" },
+          name: "Robert Anderson",
+          username: "@randerson",
+          date: "Jul 14, 2023",
+          role: "Sales Lead",
+          report: "Samantha Reed"
+        },
+        {
+          img: { id: "51", variant: "women" },
+          name: "Jessica Taylor",
+          username: "@jtaylor",
+          date: "Aug 19, 2023",
+          role: "Sales Associate",
+          report: "Brian Johnson",
+        },
+        {
+          img: { id: "82", variant: "men" },
+          name: "Michael Clark",
+          username: "@mclark",
+          date: "Aug 19, 2023",
+          role: "Sales Representative",
+          report: "Brian Johnson"
+        },
+        {
+          img: { id: "82", variant: "women" },
+          name: "Ashley Martinez",
+          username: "@amartinez",
+          date: "Oct 30, 2023",
+          role: "Sales Lead",
+          report: "Robert Anderson"
+        }
+      ].each do |team_member| %>
+        <!-- Start Team Member -->
+        <li class="px-4 py-5 sm:text-base text-sm items-start grid grid-cols-2 sm:grid-cols-12 gap-3 sm:gap-0">
+          <div class="flex items-center space-x-3 sm:col-span-3 sm:mb-0 mb-4 col-span-2">
+            <% if respond_to?(:admin_profile_path) %>
+              <%= link_to admin_profile_path do %>
+                <%= image_tag demo_avatar_url(id: team_member[:img][:id], variant: team_member[:img][:variant]), class: "rounded-full sm:w-10 w-14 sm:h-10 h-14", alt: team_member[:name] %>
+              <% end %>
+            <% else %>
+              <%= link_to "#" do %>
+                <%= image_tag demo_avatar_url(id: team_member[:img][:id], variant: team_member[:img][:variant]), class: "rounded-full sm:w-10 w-14 sm:h-10 h-14", alt: team_member[:name] %>
+              <% end %>
+            <% end %>
+
+            <div>
+              <% if respond_to?(:admin_profile_path) %>
+                <%= link_to team_member[:name], admin_profile_path, class: "sm:font-medium text-slate-900 hover:text-primary-600 sm:text-base text-lg font-semibold dark:hover:text-primary-400 dark:text-slate-300" %>
+              <% else %>
+                <%= link_to team_member[:name], "#", class: "sm:font-medium text-slate-900 hover:text-primary-600 sm:text-base text-lg font-semibold dark:hover:text-primary-400 dark:text-slate-300" %>
+              <% end %>
+
+              <p class="text-slate-500 text-sm"><%= team_member[:username] %></p>
+            </div>
+          </div>
+          <div class="sm:col-span-2 col-span-1">
+            <p><%= team_member[:date] %></p>
+            <p class="text-sm text-slate-500">Join date</p>
+          </div>
+          <div class="sm:col-span-3 col-span-1">
+            <p><%= team_member[:role] %></p>
+            <p class="text-sm text-slate-500">Role</p>
+          </div>
+          <div class="sm:col-span-3 col-span-1">
+            <p><% team_member[:report] %></p>
+            <p class="text-sm text-slate-500">Report</p>
+          </div>
+          <div data-controller="railsui-dropdown" class="sm:col-span-1 relative col-span-2">
+            <div class="flex justify-end">
+              <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"
+                class="-mt-1 block group p-2 rounded-lg focus:ring-4 focus:ring-primary-50 dark:focus:ring-slate-600/30">
+                <%= icon "cog-6-tooth", class: "size-6 stroke-current text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+              </button>
+            </div>
+            <ul data-railsui-dropdown-target="menu"
+            class="hidden transition transform origin-to-right absolute right-0 top-10 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 md:w-[200px] w-full z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 md:text-sm text-base font-medium text-slate-600 dark:text-slate-200"
+            data-transition-enter-active="transition ease-out duration-300"
+            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-300"
+            data-transition-leave-from="transform opacity-100 scale-100"
+            data-transition-leave-to="transform opacity-0 scale-95">
+              <li>
+                <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start space-x-3" do  %>
+                  <%= icon "pencil-square", class: "stroke-current size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                  <span>Edit</span>
+                <% end %>
+              </li>
+              <li>
+                <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start space-x-3" do %>
+                  <%= icon "paper-airplane", class: "stroke-current size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                  <span>Message</span>
+                <% end %>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <!-- End Team Member -->
+      <% end %>
+    </ul>
+
+    <div class="flex items-center justify-center pb-16 space-x-3">
+      <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+      <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"
+        class="text-slate-300 stroke-current size-6">
+        <g fill="none" fill-rule="evenodd">
+          <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+              <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s"
+                repeatCount="indefinite" />
+            </path>
+          </g>
+        </g>
+      </svg>
+      <p class="text-sm text-slate-400 font-medium">Loading...</p>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_email_action.html.erb

@@ -0,0 +1,15 @@
+<%# locals: (align: "center", url: root_url, action:, theme: "primary", fullwidth: false) %>
+
+<table class="action" align="<%= align %>">
+  <tr>
+    <td align="<%= align %>">
+      <a href="<%= url %>" class="action__link action__link--<%= theme %> <%= fullwidth == true ? "action__link--expanded" : nil %>" target="_blank"><%= action %></a>
+      <div itemscope itemtype="http://schema.org/EmailMessage">
+        <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
+          <link itemprop="target" href="<%= url %>"/>
+          <meta itemprop="name" content="<%= action %>"/>
+        </div>
+      </div>
+    </td>
+  </tr>
+</table>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_email_callout.html.erb

@@ -0,0 +1,7 @@
+<table class="callout">
+  <tbody>
+    <td>
+      <%= capture(&block) %>
+    </td>
+  </tbody>
+</table>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_email_spacer.html.erb

@@ -0,0 +1,7 @@
+<table class="spacer">
+  <tbody>
+    <tr>
+      <td height="<%= amount %>" style="font-size:<%= amount %>px;line-height:<%= amount %>px;">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_error_messages.html.erb

@@ -0,0 +1,15 @@
+<% if resource.errors.any? %>
+  <div class="bg-rose-50 text-rose-700 sm:px-9 sm:py-6 px-6 py-6 rounded-lg mb-6 dark:bg-rose-400/10 dark:border dark:border-rose-400/20 dark:text-rose-50 text-sm" role="alert">
+    <div class="flex items-start gap-4">
+      <%= icon "shield-exclamation", class: "size-6 text-rose-700 flex-shrink-0", variant: :solid %>
+      <div class="flex-1">
+        <p class="font-bold"><%= pluralize(resource.errors.count, "error") %> prohibited this <%= resource.class.name.downcase %> from being saved:</p>
+        <ul class="list-disc mt-3 ml-4">
+          <% resource.errors.each do |error| %>
+            <li><%= error.full_message %></li>
+          <% end %>
+        </ul>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_flash.html.erb

@@ -0,0 +1,11 @@
+<% if notice %>
+  <div class="bg-primary-600 text-white text-center p-4" role="alert">
+    <p><%= sanitize notice %></p>
+  </div>
+<% end %>
+
+<% if alert %>
+  <div class="bg-rose-600 text-white text-center p-4" role="alert">
+    <p><%= sanitize alert %></p>
+  </div>
+<% end %>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_fonts.html.erb

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_footer.html.erb

@@ -0,0 +1,51 @@
+<footer class="container mx-auto px-4 pb-4">
+  <nav role="Utility navigation">
+    <ul class="lg:flex items-center justify-center text-center lg:my-6 mb-6 lg:text-base text-lg">
+      <li class="py-3 lg:py-0">
+        <%= link_to "Product", "#", class: "px-3 py-2 hover:text-primary-700 dark:hover:text-primary-500" %>
+      </li>
+      <li class="py-3 lg:py-0">
+        <%= link_to "Customers", "#", class: "px-3 py-2 hover:text-primary-700 dark:hover:text-primary-500" %>
+      </li>
+      <li class="py-3 lg:py-0">
+        <%= link_to "Features", "#", class: "px-3 py-2 hover:text-primary-700 dark:hover:text-primary-500" %>
+      </li>
+      <% if defined?(rui_pricing_path) %>
+        <li class="py-3 lg:py-0">
+          <%= link_to "Pricing", rui_pricing_path, class: "px-3 py-2 hover:text-primary-700 dark:hover:text-primary-500" %>
+        </li>
+      <% end %>
+      <% if defined?(rui_about_path)%>
+        <li class="py-3 lg:py-0">
+          <%= link_to "Company", rui_about_path, class: "px-3 py-2 hover:text-primary-700  dark:hover:text-primary-500" %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+
+  <ul class="flex items-center justify-center gap-6 mb-6">
+    <li>
+      <%= link_to "#", class: "group", target: :_blank do %>
+        <%= icon "facebook", custom_path: "/railsui/social/facebook.svg", class: "size-6 fill-current text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <% end %>
+    </li>
+    <li>
+      <%= link_to "#", class: "group", target: :_blank do %>
+        <%= icon "x", custom_path: "/railsui/social/x.svg", class: "size-6 fill-current text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <% end %>
+    </li>
+    <li>
+      <%= link_to "#", class: "group", target: :_blank do %>
+        <%= icon "linkedin", custom_path: "/railsui/social/linkedin.svg", class: "size-6 fill-current text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <% end %>
+    </li>
+    <li>
+      <%= link_to "#", class: "group", target: :_blank do %>
+        <%= icon "youtube", custom_path: "/railsui/social/youtube.svg", class: "size-6 fill-current text-slate-400 group-hover:text-primary-600 dark:group-hover:text-primary-500" %>
+      <% end %>
+    </li>
+  </ul>
+
+  <p class="text-center text-slate-600 text-sm">&copy; <%= Railsui.config.application_name %> All Rights Reserved. Made with <a
+      href="https://railsui.com" class="underline" target="_blank">Rails UI</a></p>
+</footer>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_meta.html.erb

@@ -0,0 +1,90 @@
+<%#
+
+Put a favicon.ico or favicon.svg (preferred) in your public/ folder and add favicon_link_tag "favicon.svg" to your layout inside the <head></head> tags.
+
+You may optionally reach for the meta_tags gem as I did below and do this all dynamically.
+
+Below are the recommended tags to include for best discoverability between apps and services. You don't need everything listed to see success but many apps now query open graph tags to find assets and content for link previews so it goes a long way (i.e., Slack, Twitter, Facebook).
+
+Generate icons:
+https://redketchup.io/favicon-generator (generate from an image)
+
+Tip: Before generating icons, I typically start with a icon that is at least 512x512 in size. It can have a transparent background (.png, .svg). Keep it as simple as possible.
+
+Free editor/vector tool:
+https://figma.com
+
+Previewing:
+https://www.opengraph.xyz/
+
+
+# Usage:
+
+Title:
+Change the title and description tags below to match your own site. The title displays alongside your site name in a given browser tab next to the favicon.
+
+Description:
+The description is a good place for one to two sentences describing a page OR what the site is all about. You can tweak this on a per-page basis inside your views or controllers. See the metatags gem documentation on tips for doing so: https://github.com/kpumuk/meta-tags#mirrored-values
+
+Images:
+Swap your own images for placeholder ones inside the "assets/images/railsui/meta" folder Rails UI copied to your app (jpg, png).
+%>
+
+<%= display_meta_tags(
+  site: "#{Railsui.config.application_name.parameterize}.com", # <!-- change -->,
+  reverse: true,
+  viewport: "width=device-width, initial-scale=1",
+  title: "CHANGE ME",
+  canonical: request.original_url,
+  og: {
+    title: Railsui.config.application_name,
+    type: "website",
+    url: request.original_url,
+    image: [{
+      _: image_url("railsui/meta/opengraph.jpg"),
+      width: 1200,
+      height: 630
+    }],
+    site_name: "#{Railsui.config.application_name.parameterize}.com", # <!-- change -->
+    description: "CHANGE ME",
+  },
+  twitter: {
+    title: :title,
+    description: :description,
+    card:  "summary",
+    image: {
+      _: image_url("railsui/meta/opengraph-mark.jpg"),
+      width:  400,
+      height: 400,
+    }
+  },
+  author: Railsui.config.application_name,
+  description: "CHANGE ME",
+  icon: [
+    {
+      href: image_url("railsui/meta/favicon.svg"),
+      sizes: 'any',
+      type: "image/svg+xml"
+    },
+    {
+      href: image_url("railsui/meta/favicon-16x16.png"),
+      sizes: "16x16",
+      type: "images/png"
+    },
+    {
+      href: image_url("railsui/meta/android-chrome-192x192.png"),
+      sizes: '192x192',
+      type: "image/png"
+    },
+    {
+      href: image_url("railsui/meta/android-chrome-512x512.png"),
+      sizes: '512x512',
+      type: "image/png"
+    },
+    {
+      href: image_url("railsui/meta/apple-touch-icon.png"),
+      sizes: '180x180',
+      type: "image/png"
+    }
+  ])
+  %>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_nav.html.erb

@@ -0,0 +1,3 @@
+<header class="relative dark:bg-slate-900 bg-white dark:border-slate-700" data-controller="nav">
+  <%= render "rui/shared/nav_menu" %>
+</header>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_nav_links.html.erb

@@ -0,0 +1,8 @@
+<!-- Add your own nav links here. Below are links to the default non-admin-basedpages installed with Rails UI. -->
+<% Railsui::Pages.installed_pages.each do |page, details| %>
+  <% if respond_to?(details['path'].to_sym) && details['add_to_nav'] && details['namespace'] != 'admin' %>
+    <%= content_tag :li do %>
+      <%= nav_link_to details['title'], send(details['path'].to_sym), class: "rui-nav-link" %>
+    <% end %>
+  <% end %>
+<% end %>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_nav_menu.html.erb

@@ -0,0 +1,74 @@
+<div class="container mx-auto px-4 pt-2.5">
+  <div class="lg:flex items-center flex-wrap sm:gap-2">
+    <div class="lg:block flex items-center justify-between">
+      <%= link_to root_path, class: "size-12 flex justify-center" do %>
+        <!-- Hound logo -->
+        <svg
+          class="fill-current w-5 h-auto text-primary-600 hover:text-primary-700 duration-300 transition ease-in-out
+          dark:hover:text-primary-500"
+          width="39" height="50" viewBox="0 0 39 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M8.55264 0C3.82915 0 0 3.82915 0 8.55265V26.1842C0 30.9077 3.82915 34.7368 8.55264 34.7368C13.2761 34.7368 17.1053 30.9077 17.1053 26.1842V8.55264C17.1053 3.82915 13.2761 0 8.55264 0ZM29.6053 0C24.8818 0 21.0527 3.82915 21.0527 8.55264V41.4474C21.0527 46.1709 24.8818 50 29.6053 50C34.3288 50 38.1579 46.1708 38.1579 41.4474V8.55264C38.1579 3.82915 34.3288 0 29.6053 0Z" />
+        </svg>
+        <span class="sr-only"><%= Railsui.config.application_name %></span>
+      <% end %>
+
+      <button
+        id="dropdowns-nav-toggle"
+        data-action="click->nav#toggle"
+        class="lg:hidden block p-1 rounded focus:ring-4 focus:ring-slate-100 active:bg-white group focus:bg-white/50 dark:focus:bg-slate-800 dark:focus:ring-slate-700">
+        <div role="none" data-nav-target="menuBars">
+          <%= icon "bars-3-center-left", class: "size-8 text-slate-600 group-focus:text-primary-600
+          dark:text-slate-400 dark:group-focus:text-slate-100" %>
+        </div>
+        <div role="none" data-nav-target="menuCross" class="hidden">
+          <%= icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100" %>
+        </div>
+      </button>
+
+    </div>
+    <div
+      id="dropdowns-navigation"
+      class="lg:flex-1 lg:block hidden lg:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 lg:bg-transparent transform origin-top px-4 pb-4 lg:p-0 rounded-b lg:shadow-none shadow-xl z-40 text-base"
+      data-nav-target="nav"
+      data-transition-enter-active="transition ease-out duration-200"
+      data-transition-enter-from="opacity-0 scale-95"
+      data-transition-enter-to="opacity-100 scale-100"
+      data-transition-leave-from="opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-200"
+      data-transition-leave-to="opacity-0 scale-95">
+      <div
+        class="lg:flex-1 lg:flex flex-wrap items-center justify-between lg:text-left text-center">
+        <nav role="Primary navigation">
+          <ul
+            class="lg:flex block items-center flex-wrap space-x-0 lg:gap-3 lg:text-base  lg:leading-normal leading-relaxed space-y-1 lg:space-y-0 lg:mb-0 mb-2">
+            <%= render "rui/shared/nav_links" %>
+          </ul>
+        </nav>
+
+        <nav role="Secondary navigation">
+          <ul class="lg:flex flex-wrap items-center lg:justify-center justify-between lg:space-x-4">
+            <li class="lg:mt-0 mt-4 flex flex-col items-center relative" data-controller="railsui-dropdown">
+              <button class="group" type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+                <%= image_tag demo_avatar_url(id: rand(1..100).to_s, variant: ["men", "women"].sample), alt: "current profile photo", class: "rounded-full lg:w-10 w-12 lg:h-10 h-12 object-cover border-2 border-transparent group-hover:border-primary-600 transition duration-300 ease-in-out" %>
+              </button>
+
+              <div class="hidden transition transform origin-to-right lg:absolute right-0 top-10 bg-white rounded-lg lg:shadow-xl lg:shadow-slate-900/10 lg:border border-slate-200 lg:min-w-[200px] z-50 py-1 divide-y lg:w-auto w-full lg:text-sm dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 text-base font-medium text-slate-600 dark:text-slate-200 dark:divide-gray-600" data-railsui-dropdown-target="menu"
+            data-transition-enter-from="opacity-0 scale-95"
+            data-transition-enter-to="opacity-100 scale-100"
+            data-transition-leave-from="opacity-100 scale-100"
+            data-transition-leave-to="opacity-0 scale-95">
+                <div role="none">
+                  <%= link_to "Edit account", "#", class: "px-4 py-2 lg:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block", data: { turbo: false } %>
+                </div>
+                <div role="none">
+                  <%= button_to "Sign out", "#", method: :delete, class: "px-4 py-2 lg:py-[.4rem] hover:text-primary-600 dark:hover:text-primary-400 block w-full lg:!text-left !text-center", data: { turbo: false  } %>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_railsui_head.html.erb

@@ -0,0 +1,4 @@
+<%= render "rui/shared/meta" %>
+<%= render "rui/shared/fonts" %>
+<%= stylesheet_link_tag "https://unpkg.com/tippy.js@6.3.7/dist/tippy.css", "data-turbo-track": "reload" %>
+<%= yield :head %>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/shared/_search_overlay.html.erb

@@ -0,0 +1,28 @@
+<div data-search-target="overlay"
+  class="hidden fixed w-screen h-screen bg-white/70 dark:bg-slate-950/90 backdrop-blur-md z-[60] px-4 left-0 right-0 top-0 bottom-0"
+  data-transition-enter-active="transition ease-out duration-100"
+  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">
+  <div class="absolute top-4 md:right-10 right-4">
+    <button class="btn btn-white px-3" data-action="click->search#close">
+      <svg class="size-5 text-slate-700 stroke-current pointer-events-none dark:text-slate-100"
+        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <title>x-mark</title>
+        <g fill="none">
+          <path d="M6 18L18 6M6 6l12 12" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          </path>
+        </g>
+      </svg>
+    </button>
+  </div>
+  <div class="flex flex-col items-center h-full w-full justify-center">
+    <div
+      class="md:w-[600px] w-full max-w-2xl mx-auto bg-white dark:bg-slate-800 rounded-lg md:rounded-3xl shadow-xl shadow-slate-300/30 dark:shadow-slate-950/30 md:p-16 p-6 border border-slate-300/80 dark:border-slate-700/80"
+      data-search-target="content">
+      <form action="#">
+        <input type="text" data-search-target="input" placeholder="Search" class="form-input w-full">
+      </form>
+    </div>
+  </div>
+</div>