railsui 3.1.0

data/app/views/railsui/themes/hound/components/modal/_with_form.html.erb

@@ -0,0 +1,171 @@
+<div id="modal-with-form">
+  <%= render layout: example, locals: { heading: "With form", section: "Modal" } do %>
+
+    <div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-slate-800 dark:border-t dark:border-x dark:border-slate-600">
+      <div class="rounded shadow-xl mx-auto max-w-lg bg-white m-1 p-8 origin-bottom relative dark:bg-slate-700 dark:text-slate-200">
+        <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-slate-50 flex items-center justify-center rounded-full group dark:hover:bg-slate-50/50">
+          <%= icon "x-mark", class:  "text-slate-400 size-6 group-hover:text-slate-500 pointer-events-none dark:group-hover:text-slate-800 dark:text-slate-400" %>
+        </button>
+
+        <h3 id="modal-with-form" class="mb-3 text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Subscribe</h3>
+        <div class="prose prose-slate dark:prose-invert mt-2 mb-6">
+          <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+        </div>
+
+        <form action="#">
+          <div class="form-group">
+            <label for="email_demo" class="form-label">E-mail</label>
+            <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+          </div>
+          <div class="form-group">
+            <label for="reason_demo" class="form-label">Reason for joining</label>
+            <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+          </div>
+        </form>
+
+        <div class="mt-8 flex justify-start items-center flex-wrap bg-gray-50 px-8 py-4 -mx-8 -mb-8 border-t border-slate-300 rounded-b shadow-inner space-x-4 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600/70">
+          <button class="btn btn-primary">Subscribe</button>
+          <button class="btn btn-white">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <div data-controller="railsui-modal">
+      <div class="flex justify-center p-6 border-x border-b border-slate-200 rounded-b-lg relative dark:bg-slate-700 dark:border-slate-600 dark:border-t">
+        <div class="absolute top-4 left-4">
+          <%= doc_label :demo %>
+        </div>
+        <button type="button" data-action="click->railsui-modal#open" class="btn btn-primary" tabindex="0">
+          Open modal with form
+        </button>
+      </div>
+
+      <div
+    aria-labelledby="modal-with-form"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    data-action="keyup@window->railsui-modal#closeWithEsc"
+        class="hidden fixed inset-0 z-50 overflow-y-auto"
+        role="dialog"
+        >
+        <div class="h-screen w-full relative flex items-center justify-center">
+          <div
+      data-railsui-modal-target="content"
+      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"
+      class="hidden rounded shadow-xl mx-auto max-w-lg bg-white m-1 p-8 origin-bottom relative dark:bg-slate-700 dark:text-slate-200">
+            <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-slate-50 flex items-center justify-center rounded-full group dark:hover:bg-slate-50/50" data-action="click->railsui-modal#close">
+              <%= icon "x-mark", class:  "text-slate-400 size-6 group-hover:text-slate-500 pointer-events-none dark:group-hover:text-slate-800 dark:text-slate-400" %>
+            </button>
+
+            <h3 id="modal-with-form" class="mb-3 text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Subscribe</h3>
+            <div class="prose prose-slate dark:prose-invert mt-2 mb-6">
+              <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+            </div>
+
+            <form action="#">
+              <div class="form-group">
+                <label for="email_demo" class="form-label">E-mail</label>
+                <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+              </div>
+              <div class="form-group">
+                <label for="reason_demo" class="form-label">Reason for joining</label>
+                <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+              </div>
+            </form>
+
+            <div class="mt-8 flex justify-start items-center flex-wrap bg-gray-50 px-8 py-4 -mx-8 -mb-8 border-t border-slate-300 rounded-b shadow-inner space-x-4 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600/70">
+              <button class="btn btn-primary">Subscribe</button>
+              <button class="btn btn-white" data-action="click->railsui-modal#close">Cancel</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-modal">
+  <button type="button" data-action="click->railsui-modal#open" class="btn btn-primary" tabindex="0">
+    Open modal with form
+  </button>
+
+  <div aria-labelledby="modal-with-form" aria-modal="true" data-railsui-modal-target="container" data-action="keyup@window->railsui-modal#closeWithEsc" class="hidden fixed inset-0 z-50 overflow-y-auto" role="dialog">
+    <div class="h-screen w-full relative flex items-center justify-center">
+      <div data-railsui-modal-target="content"
+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"
+class="hidden rounded shadow-xl mx-auto max-w-lg bg-white m-1 p-8 origin-bottom relative dark:bg-slate-700 dark:text-slate-200">
+        <button type="button" class="absolute top-2 right-2 w-8 h-8 bg-transparent hover:bg-slate-50 flex items-center justify-center rounded-full group dark:hover:bg-slate-50/50" data-action="click->railsui-modal#close">
+          <%%= icon "x-mark", class:  "text-slate-400 size-6 group-hover:text-slate-500 pointer-events-none dark:group-hover:text-slate-800 dark:text-slate-400" %>
+        </button>
+
+        <h3 id="modal-with-form" class="mb-3 text-2xl font-extrabold text-slate-900 dark:text-slate-100 tracking-tight">Subscribe</h3>
+
+        <div class="prose prose-slate dark:prose-invert mt-2 mb-6">
+          <p>Join our community to get early access to new features, exclusive content, and connect with other developers.</p>
+        </div>
+
+        <form action="#">
+          <div class="form-group">
+            <label for="email_demo" class="form-label">E-mail</label>
+            <input id="email_demo" type="email" class="form-input" placeholder="saasquatch@railsui.com">
+          </div>
+          <div class="form-group">
+            <label for="reason_demo" class="form-label">Reason for joining</label>
+            <textarea name="reason" id="reason_demo" class="form-input" placeholder="In a couple sentences let us know your reason for joining the Rails UI community"></textarea>
+          </div>
+        </form>
+
+        <div class="mt-8 flex justify-start items-center flex-wrap bg-gray-50 px-8 py-4 -mx-8 -mb-8 border-t border-slate-300 rounded-b shadow-inner space-x-4 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600/70">
+          <button class="btn btn-primary">Subscribe</button>
+          <button class="btn btn-white" data-action="click->railsui-modal#close">Cancel</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%div{"data-controller" => "railsui-modal"}
+  %button.btn.btn-primary{"data-action" => "click->railsui-modal#open", tabindex: "0", type: "button"}
+    Open modal with form
+  .hidden.fixed.inset-0.z-50.overflow-y-auto{"aria-labelledby" => "modal-with-form", "aria-modal" => "true", "data-action" => "keyup@window->railsui-modal#closeWithEsc", "data-railsui-modal-target" => "container", role: "dialog"}
+    .h-screen.w-full.relative.flex.items-center.justify-center
+      .hidden.rounded.shadow-xl.mx-auto.max-w-lg.bg-white.m-1.p-8.origin-bottom.relative.dark:bg-slate-700.dark:text-slate-200{"data-railsui-modal-target" => "content", "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"}
+        %button.absolute.top-2.right-2.w-8.h-8.bg-transparent.hover:bg-slate-50.flex.items-center.justify-center.rounded-full.group{class: "dark:hover:bg-slate-50/50", "data-action" => "click->railsui-modal#close", type: "button"}
+          = icon "x-mark", class:  "text-slate-400 size-6 group-hover:text-slate-500 pointer-events-none dark:group-hover:text-slate-800 dark:text-slate-400"
+        %h3#modal-with-form.mb-3.text-2xl.font-extrabold.text-slate-900.dark:text-slate-100.tracking-tight Subscribe
+        .prose.prose-slate.dark:prose-invert.mt-2.mb-6
+          %p Join our community to get early access to new features, exclusive content, and connect with other developers.
+        %form{action: "#"}
+          .form-group
+            %label.form-label{for: "email_demo"} E-mail
+            %input#email_demo.form-input{placeholder: "saasquatch@railsui.com", type: "email"}/
+          .form-group
+            %label.form-label{for: "reason_demo"} Reason for joining
+            %textarea#reason_demo.form-input{name: "reason", placeholder: "In a couple sentences let us know your reason for joining the Rails UI community"}
+        .mt-8.flex.justify-start.items-center.flex-wrap.bg-gray-50.px-8.py-4.-mx-8.-mb-8.border-t.border-slate-300.rounded-b.shadow-inner.space-x-4.dark:bg-slate-700.dark:text-slate-200{class: "dark:border-slate-600/70"}
+          %button.btn.btn-primary Subscribe
+          %button.btn.btn-white{"data-action" => "click->railsui-modal#close"} Cancel
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiModal } from 'railsui-stimulus'
+
+application.register('railsui-modal', RailsuiModal)
+<% end %>
+
+<%= render_snippet(js_filename: "index.js") %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/hound/components/navigation/_base.html.erb

@@ -0,0 +1,316 @@
+<div id="navigation-base">
+  <%= render layout: example, locals: { heading: "Base", section: "Navigation" } do %>
+
+<%= render "railsui/themes/hound/components/navigation/nav_preview", flush: true do %>
+  <header class="relative dark:bg-slate-900 bg-white rounded-t" data-controller="railsui-nav railsui-prevent">
+    <div class="container mx-auto px-4">
+      <div class="md:flex items-center flex-wrap md:space-x-2">
+        <div class="md:block flex items-center justify-between">
+          <a href="/" class="w-12 h-12 flex justify-center" data-action="click->railsui-prevent#prevent">
+            <!-- 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.theme.humanize %></span>
+          </a>
+
+          <button id="base-nav-toggle" data-action="click->railsui-nav#toggle"
+            class="md: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-railsui-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-railsui-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="base-navigation"
+    class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40"
+    data-railsui-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="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
+            <nav role="Primary navigation">
+              <ul
+          class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
+                <li>
+                  <a href="#" class="rui-nav-link" data-action="click->railsui-prevent#prevent">Product</a>
+                </li>
+                <li>
+                  <a href="#" class="rui-nav-link" data-action="click->railsui-prevent#prevent">Pricing</a>
+                </li>
+                <li>
+                  <a href="#" class="rui-nav-link rui-nav-link-active" data-action="click->railsui-prevent#prevent">Company</a>
+                </li>
+              </ul>
+            </nav>
+
+            <nav role="Secondary navigation">
+              <ul class="md:flex flex-wrap items-center justify-center grid grid-cols-2 md:gap-0 gap-4 md:mt-0 mt-6">
+                <li class="md:pr-5">
+                  <a href="#" class="group md:border-none border rounded md:bg-transparent dark:bg-slate-900 dark:border-slate-700 bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-800" data-action="click->railsui-prevent#prevent">
+                    <%= icon "question-mark-circle", class:  "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+                  </a>
+                </li>
+                <li class="md:pr-3">
+                  <a href="#" class="group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" data-action="click->railsui-prevent#prevent">
+                    <%= icon "book-open", class:  "fill-current size-5
+              text-primary-600 group-hover:text-primary-700
+              transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+                  </a>
+                </li>
+                <li class="md:block hidden md:pr-3 md:pl-2">
+                  <span class="h-6 w-px bg-slate-200 block dark:bg-slate-600"></span>
+                </li>
+                <li class="w-full md:w-auto md:mb-0 col-span-2">
+                  <a href="#" class="btn btn-transparent md:w-auto w-full" data-action="click->railsui-prevent#prevent">Sign in</a>
+                </li>
+                <li class="md:pl-3 w-full md:w-auto col-span-2">
+                  <a href="#" class="btn btn-dark md:w-auto w-full" data-action="click->railsui-prevent#prevent">Sign up</a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<header class="relative dark:bg-slate-900 py-1" data-controller="nav">
+  <div class="container mx-auto px-4">
+    <div class="md:flex items-center flex-wrap md:space-x-2">
+      <div class="md:block flex items-center justify-between">
+        <a href="/" class="w-12 h-12 flex justify-center">
+          <!-- 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.theme.humanize %></span>
+        </a>
+
+        <button id="base-nav-toggle" data-action="click->nav#toggle" class="md: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="base-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40" 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="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
+          <nav role="Primary navigation">
+            <ul class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
+              <li>
+                <a href="#" class="rui-nav-link">Product</a>
+              </li>
+              <li>
+                <a href="#" class="rui-nav-link">Pricing</a>
+              </li>
+              <li>
+                <a href="#" class="rui-nav-link rui-nav-link-active">Company</a>
+              </li>
+            </ul>
+          </nav>
+
+          <nav role="Secondary navigation">
+            <ul class="md:flex flex-wrap items-center justify-center grid grid-cols-2 md:gap-0 gap-4 md:mt-0 mt-6">
+              <li class="md:pr-5">
+                <a href="#" class="group md:border-none border rounded md:bg-transparent dark:bg-slate-900 dark:border-slate-700 bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-800">
+                  <%%= icon "question-mark-circle", class:  "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+                </a>
+              </li>
+              <li class="md:pr-3">
+                <a href="#" class="group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800">
+                  <%%= icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+                </a>
+              </li>
+              <li class="md:block hidden md:pr-3 md:pl-2">
+                <span class="h-6 w-px bg-slate-200 block dark:bg-slate-600"></span>
+              </li>
+              <li class="w-full md:w-auto md:mb-0 col-span-2">
+                <a href="#" class="btn btn-transparent md:w-auto w-full">Sign in</a>
+              </li>
+              <li class="md:pl-3 w-full md:w-auto col-span-2">
+                <a href="#" class="btn btn-dark md:w-auto w-full">Sign up</a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<header class="relative dark:bg-slate-900 py-1" data-controller="nav">
+  <div class="container mx-auto px-4">
+    <div class="md:flex items-center flex-wrap md:space-x-2">
+      <div class="md: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.theme.humanize %></span>
+        <%% end %>
+
+      <button id="base-nav-toggle" data-action="click->nav#toggle" class="md: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="base-navigation" class="md:flex-1 md:block hidden md:static absolute top-14 left-0 w-full bg-white dark:bg-slate-900 md:bg-transparent transform origin-top p-4 md:p-0 lg:p-0 rounded-b md:shadow-none shadow-xl z-40"
+    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="md:flex-1 md:flex flex-wrap items-center justify-between lg:text-left text-center">
+        <nav role="Primary navigation">
+          <ul class="md:flex block items-center flex-wrap space-x-0 md:space-x-3 md:text-base text-lg md:leading-normal leading-relaxed space-y-1 md:space-y-0 sm:mb-0 mb-4">
+            <li>
+              <%%= nav_link_to "Product", "#", class: "rui-nav-link" %>
+            </li>
+            <li>
+              <%%= nav_link_to "Pricing", "#", class: "rui-nav-link" %>
+            </li>
+            <li>
+              <%%= nav_link_to "Company", "#", class: "rui-nav-link" %>
+            </li>
+          </ul>
+        </nav>
+
+        <nav role="Secondary navigation">
+          <ul class="md:flex flex-wrap items-center justify-center grid grid-cols-2 md:gap-0 gap-4 md:mt-0 mt-6">
+            <li class="md:pr-5">
+              <%%= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do %>
+                <%%= icon "question-mark-circle", class:  "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+              <%% end %>
+            </li>
+            <li class="md:pr-3">
+              <%%= link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do %>
+                <%%= icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid %>
+              <%% end %>
+            </li>
+            <li class="md:block hidden md:pr-3 md:pl-2">
+              <span class="h-6 w-px bg-slate-200 block dark:bg-slate-600"></span>
+            </li>
+            <li class="w-full md:w-auto md:mb-0 col-span-2">
+              <%%= link_to "Sign in", new_user_session_path, class: "btn btn-transparent md:w-auto w-full" %>
+            </li>
+            <li class="md:pl-3 w-full md:w-auto col-span-2">
+              <%%= link_to "Sign up", new_user_registration_path, class: "btn btn-dark md:w-auto w-full" %>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</header>
+<% end %>
+
+<% content_for :haml, flush: true do %>
+%header.relative.dark:bg-slate-900.py-1{"data-controller" => "nav"}
+  .container.mx-auto.px-4
+    .md:flex.items-center.flex-wrap.md:space-x-2
+      .md:block.flex.items-center.justify-between
+        = link_to root_path, class: "size-12 flex justify-center" do
+          / Hound logo
+          %svg.fill-current.w-5.h-auto.text-primary-600.hover:text-primary-700.duration-300.transition.ease-in-out.dark:hover:text-primary-500{fill: "none", height: "50", viewbox: "0 0 39 50", width: "39", xmlns: "http://www.w3.org/2000/svg"}
+            %path{"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", "fill-rule" => "evenodd"}
+          %span.sr-only Hound
+        %button#base-nav-toggle.md:hidden.block.p-1.rounded.focus:ring-4.focus:ring-slate-100.active:bg-white.group.dark:focus:bg-slate-800.dark:focus:ring-slate-700{class: "focus:bg-white/50", "data-action" => "click->nav#toggle"}
+          %div{"data-nav-target" => "menuBars", role: "none"}
+            = 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"
+          .hidden{"data-nav-target" => "menuCross", role: "none"}
+            = icon "x-mark", class: "size-8 text-slate-600 group-focus:text-primary-600 dark:text-slate-400 dark:group-focus:text-slate-100"
+      #base-navigation.md:flex-1.md:block.hidden.md:static.absolute.top-14.left-0.w-full.bg-white.dark:bg-slate-900.md:bg-transparent.transform.origin-top.p-4.md:p-0.lg:p-0.rounded-b.md:shadow-none.shadow-xl.z-40{"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-active" => "transition ease-in duration-200", "data-transition-leave-from" => "opacity-100 scale-100", "data-transition-leave-to" => "opacity-0 scale-95"}
+        .md:flex-1.md:flex.flex-wrap.items-center.justify-between.lg:text-left.text-center
+          %nav{role: "Primary navigation"}
+            %ul.md:flex.block.items-center.flex-wrap.space-x-0.md:space-x-3.md:text-base.text-lg.md:leading-normal.leading-relaxed.space-y-1.md:space-y-0.sm:mb-0.mb-4
+              %li
+                = nav_link_to "Product", "#", class: "rui-nav-link"
+              %li
+                = nav_link_to "Pricing", "#", class: "rui-nav-link"
+              %li
+                = nav_link_to "Company", "#", class: "rui-nav-link"
+          %nav{role: "Secondary navigation"}
+            %ul.md:flex.flex-wrap.items-center.justify-center.grid.grid-cols-2.md:gap-0.gap-4.md:mt-0.mt-6
+              %li.md:pr-5
+                = link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do
+                  = icon "question-mark-circle", class:  "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid
+              %li.md:pr-3
+                = link_to "#", class: "group md:border-none border rounded sm:bg-transparent bg-white flex justify-center items-center md:py-0 py-2 md:px-0 px-3 md:block md:focus:ring-none focus:ring-4 focus:ring-slate-100 dark:bg-slate-900 dark:border-slate-700 dark:focus:ring-slate-800" do
+                  = icon "book-open", class: "fill-current size-5 text-primary-600 group-hover:text-primary-700 transition ease-in-out duration-300 dark:text-primary-500 dark:group-hover:text-primary-400", variant: :solid
+              %li.md:block.hidden.md:pr-3.md:pl-2
+                %span.h-6.w-px.bg-slate-200.block.dark:bg-slate-600
+              %li.w-full.md:w-auto.md:mb-0.col-span-2
+                = link_to "Sign in", new_user_session_path, class: "btn btn-transparent md:w-auto w-full"
+              %li.md:pl-3.w-full.md:w-auto.col-span-2
+                = link_to "Sign up", new_user_registration_path, class: "btn btn-dark md:w-auto w-full"
+<% end %>
+
+<% content_for :js, flush: true do %>
+// app/javascript/controllers/nav_controller.js
+
+import { Controller } from '@hotwired/stimulus'
+import { useTransition } from 'stimulus-use'
+
+export default class extends Controller {
+  static targets = ['nav', 'menuBars', 'menuCross']
+
+  connect() {
+    useTransition(this, {
+      element: this.navTarget
+    })
+  }
+
+  toggle() {
+    this.toggleTransition()
+    this.swapIcon()
+  }
+
+  disconnect() {
+    this.leave()
+  }
+
+  swapIcon() {
+    this.menuBarsTarget.classList.toggle('hidden')
+    this.menuCrossTarget.classList.toggle('hidden')
+  }
+}
+<% end %>
+
+<%= render_snippet(html_filename: "nav.html", erb_filename: "_nav.html.erb", haml_filename: "_nav.haml.erb", js_filename: "nav_controller.js") %>
+<% end %>
+<% end %>
+</div>

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

@@ -0,0 +1,9 @@
+<div class="rounded-lg border min-h-[200px] rounded-t relative shadow-inner <%= local_assigns[:dark] == true ? "border-slate-700 bg-slate-800" : "dark:border-slate-700 dark:bg-slate-800 border-slate-200 bg-slate-50"  %>">
+  <div class="w-full border-b  <%= local_assigns[:dark] == true ? "rounded-t border-slate-700": "border-slate-200 rounded-t dark:border-slate-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-slate-900/50" : "text-slate-200/70 dark:text-slate-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>