railsui 3.1.4 → 3.2.0

data/app/views/railsui/themes/corgie/components/card/_article.html.erb

@@ -0,0 +1,119 @@
+<div id="card-article">
+<%= render layout: example, locals: { heading: "Article", section: "Card" } do %>
+  <div class="w-[377px]">
+  <article
+    class="flex flex-col overflow-hidden transition-shadow shadow-sm rounded-3xl outline-1 outline-neutral-300/80 dark:outline-neutral-600/70 hover:shadow-xl dark:shadow-md dark:shadow-black/40">
+    <%= link_to "#", class: "shrink-0" do %>
+      <%= image_tag "railsui/blog1.jpg", class: "object-cover w-full h-48" %>
+    <% end %>
+    <div class="flex flex-col justify-between flex-1 p-6 bg-white dark:bg-neutral-900">
+      <div class="flex-1">
+        <p class="mb-2 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+          <a href="#">Technology</a>
+        </p>
+        <a href="#" class="block">
+          <h3 class="mb-3 h4 line-clamp-2">Understanding Neural Networks: A Beginner's Guide</h3>
+          <div class="prose prose-neutral dark:prose-invert">
+            <p>Dive into the fundamentals of neural networks and learn how they power modern AI systems like Corgie AI.</p>
+          </div>
+        </a>
+      </div>
+      <div class="flex items-center mt-6">
+        <div class="shrink-0">
+          <%= image_tag demo_avatar_url(variant: :women, id: 3), alt: "Sarah Wilson", class: "w-10 h-10 rounded-full shrink-0 object-cover" %>
+        </div>
+        <div class="ml-3">
+          <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Sarah Wilson</p>
+          <div class="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
+            <time datetime="<%= DateTime.now.iso8601 %>"><%= DateTime.now.strftime('%B %d, %Y') %></time>
+
+            <span aria-hidden="true">&middot;</span>
+            <span>7 min read</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<article
+  class="flex flex-col overflow-hidden transition-shadow shadow-sm rounded-3xl outline-1 outline-neutral-300/80 dark:outline-neutral-600/70 hover:shadow-xl dark:shadow-md dark:shadow-black/40">
+  <%= link_to "#", class: "shrink-0" do %>
+    <%= image_tag "railsui/blog1.jpg", class: "object-cover w-full h-48" %>
+  <% end %>
+  <div class="flex flex-col justify-between flex-1 p-6 bg-white dark:bg-neutral-900">
+    <div class="flex-1">
+      <p class="mb-2 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+        <a href="#">Technology</a>
+      </p>
+      <a href="#" class="block">
+        <h3 class="mb-3 h4 line-clamp-2">Understanding Neural Networks: A Beginner's Guide</h3>
+        <div class="prose prose-neutral dark:prose-invert">
+          <p>Dive into the fundamentals of neural networks and learn how they power modern AI systems like Corgie AI.</p>
+        </div>
+      </a>
+    </div>
+    <div class="flex items-center mt-6">
+      <div class="shrink-0">
+        <%= image_tag demo_avatar_url(variant: :women, id: 3), alt: "Sarah Wilson", class: "w-10 h-10 rounded-full shrink-0 object-cover" %>
+      </div>
+      <div class="ml-3">
+        <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Sarah Wilson</p>
+        <div class="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
+          <time datetime="<%= DateTime.now.iso8601 %>"><%= DateTime.now.strftime('%B %d, %Y') %></time>
+
+          <span aria-hidden="true">&middot;</span>
+          <span>7 min read</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<article
+  class="flex flex-col overflow-hidden transition-shadow shadow-sm rounded-3xl outline-1 outline-neutral-300/80 dark:outline-neutral-600/70 hover:shadow-xl dark:shadow-md dark:shadow-black/40">
+  <%%= link_to "#", class: "shrink-0" do %>
+    <%%= image_tag "railsui/blog1.jpg", class: "object-cover w-full h-48" %>
+  <%% end %>
+  <div class="flex flex-col justify-between flex-1 p-6 bg-white dark:bg-neutral-900">
+    <div class="flex-1">
+      <p class="mb-2 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+        <%%= link_to "Technology", rui_blog_category_path %>
+      </p>
+
+      <%%= link_to rui_blog_show_path do %>
+        <h3 class="mb-3 h4 line-clamp-2">Understanding Neural Networks: A Beginner's Guide</h3>
+        <div class="prose prose-neutral dark:prose-invert">
+          <p>Dive into the fundamentals of neural networks and learn how they power modern AI systems like Corgie AI.</p>
+        </div>
+      <%% end %>
+    </div>
+
+    <div class="flex items-center mt-6">
+      <div class="shrink-0">
+        <%%= image_tag demo_avatar_url(variant: :women, id: 3), alt: "Sarah Wilson", class: "w-10 h-10 rounded-full shrink-0 object-cover" %>
+      </div>
+      <div class="ml-3">
+        <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">Sarah Wilson</p>
+        <div class="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">
+          <time datetime="<%%= DateTime.now.iso8601 %>"><%%= DateTime.now.strftime('%B %d, %Y') %></time>
+
+          <span aria-hidden="true">&middot;</span>
+          <span>7 min read</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</article>
+<% end %>
+
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/card/_base.html.erb

@@ -0,0 +1,34 @@
+<div id="card-base">
+<%= render layout: example, locals: { heading: "Base", section: "Card" } do %>
+
+<div class="md:w-[377px]">
+  <div class="card">
+    <h3 class="h4">Create a message</h3>
+    <p class="prose prose-slate dark:prose-invert mt-2 mb-4">Send a message to your teammates.</p>
+    <button class="btn btn-primary">Start writing</button>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="card">
+  <h3 class="h4">Create a message</h3>
+  <p class="prose prose-slate dark:prose-invert mt-2 mb-4">Send a message to your teammates.</p>
+  <button class="btn btn-primary">Start writing</button>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="md:w-[377px]">
+  <div class="card">
+    <h3 class="h4">Create a message</h3>
+    <p class="prose prose-slate dark:prose-invert mt-2 mb-4">Send a message to your teammates.</p>
+    <button class="btn btn-primary">Start writing</button>
+  </div>
+</div>
+<% end %>
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/card/_feature.html.erb

@@ -0,0 +1,54 @@
+<div id="card-feature">
+<%= render layout: example, locals: { heading: "Feature", section: "Card" } do %>
+<div class="w-[377px]">
+  <div class="card">
+    <div class="flex items-center justify-center mb-6 size-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl">
+      <%= icon "lock-closed", class: "size-6 text-blue-600 dark:text-blue-400" %>
+    </div>
+    <h3 class="mb-4 h5">End-to-End Encryption</h3>
+    <div class="prose prose-neutral dark:prose-invert">
+      <p>
+        All conversations are encrypted using AES-256 encryption, ensuring your data remains private and secure at
+        all times.
+      </p>
+    </div>
+  </div>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="card">
+  <div class="flex items-center justify-center mb-6 size-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl">
+    <%= icon "lock-closed", class: "size-6 text-blue-600 dark:text-blue-400" %>
+  </div>
+  <h3 class="mb-4 h5">End-to-End Encryption</h3>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>
+      All conversations are encrypted using AES-256 encryption, ensuring your data remains private and secure at
+      all times.
+    </p>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="card">
+  <div class="flex items-center justify-center mb-6 size-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl">
+    <%%= icon "lock-closed", class: "size-6 text-blue-600 dark:text-blue-400" %>
+  </div>
+  <h3 class="mb-4 h5">End-to-End Encryption</h3>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>
+      All conversations are encrypted using AES-256 encryption, ensuring your data remains private and secure at
+      all times.
+    </p>
+  </div>
+</div>
+<% end %>
+
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/card/_team_member.html.erb

@@ -0,0 +1,60 @@
+<div id="card-team-member">
+<%= render layout: example, locals: { heading: "Team Member", section: "Card" } do %>
+<div class="w-[362px]">
+  <div class="card">
+    <div class="flex justify-center ">
+      <%= image_tag demo_avatar_url(variant: :women, id: 95), alt: "Maya Rodriguez", class: "mb-6 rounded-full size-20" %>
+    </div>
+    <div class="text-center">
+      <h3 class="mb-2 h5">Maya Rodriguez</h3>
+      <p class="mb-4 text-neutral-600 dark:text-neutral-400">CTO & Co-founder</p>
+      <div class="prose-sm prose prose-neutral dark:prose-invert">
+        <p>
+          AI systems architect with 15 years of experience building scalable machine learning platforms.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="card">
+  <div class="flex justify-center ">
+    <%= image_tag demo_avatar_url(variant: :women, id: 95), alt: "Maya Rodriguez", class: "mb-6 rounded-full size-20" %>
+  </div>
+  <div class="text-center">
+    <h3 class="mb-2 h5">Maya Rodriguez</h3>
+    <p class="mb-4 text-neutral-600 dark:text-neutral-400">CTO & Co-founder</p>
+    <div class="prose-sm prose prose-neutral dark:prose-invert">
+      <p>
+        AI systems architect with 15 years of experience building scalable machine learning platforms.
+      </p>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="card">
+  <div class="flex justify-center ">
+    <%%= image_tag demo_avatar_url(variant: :women, id: 95), alt: "Maya Rodriguez", class: "mb-6 rounded-full size-20" %>
+  </div>
+  <div class="text-center">
+    <h3 class="mb-2 h5">Maya Rodriguez</h3>
+    <p class="mb-4 text-neutral-600 dark:text-neutral-400">CTO & Co-founder</p>
+    <div class="prose-sm prose prose-neutral dark:prose-invert">
+      <p>
+        AI systems architect with 15 years of experience building scalable machine learning platforms.
+      </p>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/card/_value.html.erb

@@ -0,0 +1,54 @@
+<div id="card-value">
+<%= render layout: example, locals: { heading: "Value", section: "Card" } do %>
+<div class="w-[377px]">
+  <div class="card">
+    <div class="flex items-center justify-center mb-6 size-16 bg-neutral-200/60 rounded-2xl dark:bg-neutral-900">
+      <%= icon "shield-check", class:"size-8 text-neutral-700 dark:text-neutral-100 dark:text-neutral-100" %>
+    </div>
+    <h3 class="mb-4 h5">Privacy First</h3>
+    <div class="prose prose-neutral dark:prose-invert">
+      <p>
+        Your conversations and data belong to you. We use enterprise-grade encryption and never share your
+        information.
+      </p>
+    </div>
+  </div>
+</div>
+
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div class="card">
+  <div class="flex items-center justify-center mb-6 size-16 bg-neutral-200/60 rounded-2xl dark:bg-neutral-900">
+    <%= icon "shield-check", class:"size-8 text-neutral-700 dark:text-neutral-100 dark:text-neutral-100" %>
+  </div>
+  <h3 class="mb-4 h5">Privacy First</h3>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>
+      Your conversations and data belong to you. We use enterprise-grade encryption and never share your
+      information.
+    </p>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="card">
+  <div class="flex items-center justify-center mb-6 size-16 bg-neutral-200/60 rounded-2xl dark:bg-neutral-900">
+    <%%= icon "shield-check", class:"size-8 text-neutral-700 dark:text-neutral-100 dark:text-neutral-100" %>
+  </div>
+  <h3 class="mb-4 h5">Privacy First</h3>
+  <div class="prose prose-neutral dark:prose-invert">
+    <p>
+      Your conversations and data belong to you. We use enterprise-grade encryption and never share your
+      information.
+    </p>
+  </div>
+</div>
+<% end %>
+
+
+<%= render_snippet(active_tab: :erb) %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/combobox/_base.html.erb

@@ -0,0 +1,250 @@
+<div id="combobox-base">
+
+<div class="prose prose-neutral dark:prose-invert">
+<p>The Combobox component is an accessible real-time search dropdown presented as a select field. Use tab and key commands to navigate with ease.</p>
+
+<p>To use this component you'll need to leverage the <code>RailsuiCombobox</code> module from the <%= link_to "railsui-stimulus", "https://github.com/getrailsui/railsui-stimulus", target: :_blank %> library. This comes pre-installed for your active theme so it's ready-to-use.</p>
+
+<p>For advanced options and values <%= link_to "read the docs", "https://github.com/getrailsui/railsui-stimulus/blob/main/docs/combobox.md", target: :_blank %>.</p>
+</div>
+
+<%= render layout: example, locals: { heading: "Base", section: "Combobox" } do %>
+
+<%= render preview("neutral") do %>
+<div class="flex items-center justify-center pt-16">
+  <div class="relative flex justify-center w-56 font-tiktok" data-controller="railsui-combobox" data-action="click@window->railsui-combobox#handleOutsideClick" data-railsui-combobox-active-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-700 dark:text-neutral-100" data-railsui-combobox-inactive-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100">
+
+    <!-- Hidden input for form submission -->
+    <input type="hidden" name="selected_option" data-railsui-combobox-target="hiddenInput" />
+
+    <!-- Top-level combobox button -->
+    <div aria-expanded="false" aria-controls="combobox-list" aria-labelledby="combobox-label" data-action="click->railsui-combobox#toggleDropdown keydown.enter->railsui-combobox#toggleDropdown" data-railsui-combobox-target="box" role="combobox" tabindex="0" class="form-input w-56 flex items-center justify-between">
+      <span id="combobox-label" class="sr-only">Corg 3</span>
+      <span data-railsui-combobox-target="text">Corg 3</span>
+      <%= icon "chevron-down", class: "size-4 stroke-current" %>
+    </div>
+
+
+    <!-- combobox dropdown -->
+    <div data-railsui-combobox-target="list" 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" data-action="keydown.esc->railsui-combobox#hideDropdown" class="origin-top md:top-10 md:bottom-auto bottom-10 shadow-lg dark:bg-neutral-800 rounded-3xl outline outline-neutral-300/80 dark:outline-neutral-600/80 max-h-50 absolute z-10 hidden w-full mt-1 overflow-y-auto transition duration-200 ease-in-out bg-white" role="listbox" aria-labelledby="combobox-label">
+
+      <!-- Search input inside dropdown -->
+      <div class="p-2">
+        <label for="combobox-search" class="sr-only">Search</label>
+        <div class="relative">
+          <input id="combobox-search" type="text" placeholder="Search..." autocomplete="off" aria-autocomplete="list" data-railsui-combobox-target="input" data-action="input->railsui-combobox#filter keydown->railsui-combobox#handleKeydown" class="rounded-3xl pr-3 pl-8 py-1.5 border border-neutral-400/40 bg-white dark:bg-neutral-800 dark:text-neutral-100 focus:border-neutral-400/80 focus:ring-4 focus:ring-neutral-400/10 dark:border-neutral-700/80 dark:focus:ring-neutral-600/10 dark:placeholder:text-neutral-500 focus:shadow-none focus:outline-none placeholder-neutral-600/80 font-normal antialiased font-sans w-full shadow-neutral-200/30 shadow-sm dark:shadow-none">
+          <svg class="absolute stroke-neutral-400 size-4 top-3 left-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <title>magnifying-glass</title>
+            <g fill="none">
+              <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <!-- List of options -->
+      <ul role="presentation">
+        <li id="option-1" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-3" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+          Corg 3
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <g fill="none">
+                <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                </path>
+              </g>
+            </svg>
+          </span>
+        </li>
+        <li id="option-2" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-value="corg-3.5" data-railsui-combobox-target="option" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+          Corg 3.5
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <g fill="none">
+                <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                </path>
+              </g>
+            </svg>
+          </span>
+        </li>
+        <li id="option-3" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-4" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer hover:bg-neutral-100 text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" tabindex="0" role="option">
+          Corg 4
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+
+              <g fill="none">
+                <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                </path>
+              </g>
+            </svg>
+          </span>
+        </li>
+      </ul>
+
+      <!-- No results message -->
+      <div data-railsui-combobox-target="noresults" class="hidden px-4 py-2 text-neutral-500" aria-hidden="true">
+        No results found
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+  <div class="flex items-center justify-center pt-16">
+    <div class="relative flex justify-center w-56 font-tiktok" data-controller="railsui-combobox" data-action="click@window->railsui-combobox#handleOutsideClick" data-railsui-combobox-active-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-700 dark:text-neutral-100" data-railsui-combobox-inactive-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100">
+
+      <!-- Hidden input for form submission -->
+      <input type="hidden" name="selected_option" data-railsui-combobox-target="hiddenInput" />
+
+      <!-- Top-level combobox button -->
+      <div aria-expanded="false" aria-controls="combobox-list" aria-labelledby="combobox-label" data-action="click->railsui-combobox#toggleDropdown keydown.enter->railsui-combobox#toggleDropdown" data-railsui-combobox-target="box" role="combobox" tabindex="0" class="form-input w-56 flex items-center justify-between">
+        <span id="combobox-label" class="sr-only">Corg 3</span>
+        <span data-railsui-combobox-target="text">Corg 3</span>
+        <%= icon "chevron-down", class: "size-4 stroke-current" %>
+      </div>
+
+
+      <!-- combobox dropdown -->
+      <div data-railsui-combobox-target="list" 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" data-action="keydown.esc->railsui-combobox#hideDropdown" class="origin-top md:top-10 md:bottom-auto bottom-10 shadow-lg dark:bg-neutral-800 rounded-3xl outline outline-neutral-300/80 dark:outline-neutral-600/80 max-h-50 absolute z-10 hidden w-full mt-1 overflow-y-auto transition duration-200 ease-in-out bg-white" role="listbox" aria-labelledby="combobox-label">
+
+        <!-- Search input inside dropdown -->
+        <div class="p-2">
+          <label for="combobox-search" class="sr-only">Search</label>
+          <div class="relative">
+            <input id="combobox-search" type="text" placeholder="Search..." autocomplete="off" aria-autocomplete="list" data-railsui-combobox-target="input" data-action="input->railsui-combobox#filter keydown->railsui-combobox#handleKeydown" class="rounded-3xl pr-3 pl-8 py-1.5 border border-neutral-400/40 bg-white dark:bg-neutral-800 dark:text-neutral-100 focus:border-neutral-400/80 focus:ring-4 focus:ring-neutral-400/10 dark:border-neutral-700/80 dark:focus:ring-neutral-600/10 dark:placeholder:text-neutral-500 focus:shadow-none focus:outline-none placeholder-neutral-600/80 font-normal antialiased font-sans w-full shadow-neutral-200/30 shadow-sm dark:shadow-none">
+            <svg class="absolute stroke-neutral-400 size-4 top-3 left-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+              <title>magnifying-glass</title>
+              <g fill="none">
+                <path d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
+        </div>
+
+        <!-- List of options -->
+        <ul role="presentation">
+          <li id="option-1" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-3" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+            Corg 3
+
+            <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+              <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <g fill="none">
+                  <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  </path>
+                </g>
+              </svg>
+            </span>
+          </li>
+          <li id="option-2" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-value="corg-3.5" data-railsui-combobox-target="option" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+            Corg 3.5
+
+            <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+              <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+                <g fill="none">
+                  <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  </path>
+                </g>
+              </svg>
+            </span>
+          </li>
+          <li id="option-3" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-4" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer hover:bg-neutral-100 text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" tabindex="0" role="option">
+            Corg 4
+
+            <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+              <svg class="stroke-current text-neutral-500 dark:text-neutral-50 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+
+                <g fill="none">
+                  <path d="M4.5 12.75l6 6 9-13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                  </path>
+                </g>
+              </svg>
+            </span>
+          </li>
+        </ul>
+
+        <!-- No results message -->
+        <div data-railsui-combobox-target="noresults" class="hidden px-4 py-2 text-neutral-500" aria-hidden="true">
+          No results found
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div class="flex items-center justify-center pt-16">
+  <div class="relative flex justify-center w-56 font-tiktok" data-controller="railsui-combobox" data-action="click@window->railsui-combobox#handleOutsideClick" data-railsui-combobox-active-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-800 dark:bg-neutral-700 dark:text-neutral-100" data-railsui-combobox-inactive-class-value="bg-white cursor-pointer text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100">
+
+    <!-- Hidden input for form submission -->
+    <input type="hidden" name="selected_option" data-railsui-combobox-target="hiddenInput" />
+
+    <!-- Top-level combobox button -->
+    <div aria-expanded="false" aria-controls="combobox-list" aria-labelledby="combobox-label" data-action="click->railsui-combobox#toggleDropdown keydown.enter->railsui-combobox#toggleDropdown" data-railsui-combobox-target="box" role="combobox" tabindex="0" class="form-input w-56 flex items-center justify-between">
+      <span id="combobox-label" class="sr-only">Corg 3</span>
+      <span data-railsui-combobox-target="text">Corg 3</span>
+      <%%= icon "chevron-down", class: "size-4 stroke-current" %>
+    </div>
+
+
+    <!-- combobox dropdown -->
+    <div data-railsui-combobox-target="list" 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" data-action="keydown.esc->railsui-combobox#hideDropdown" class="origin-top md:top-10 md:bottom-auto bottom-10 shadow-lg dark:bg-neutral-800 rounded-3xl outline outline-neutral-300/80 dark:outline-neutral-600/80 max-h-50 absolute z-10 hidden w-full mt-1 overflow-y-auto transition duration-200 ease-in-out bg-white" role="listbox" aria-labelledby="combobox-label">
+
+      <!-- Search input inside dropdown -->
+      <div class="p-2">
+        <label for="combobox-search" class="sr-only">Search</label>
+        <div class="relative">
+          <input id="combobox-search" type="text" placeholder="Search..." autocomplete="off" aria-autocomplete="list" data-railsui-combobox-target="input" data-action="input->railsui-combobox#filter keydown->railsui-combobox#handleKeydown" class="rounded-3xl pr-3 pl-8 py-1.5 border border-neutral-400/40 bg-white dark:bg-neutral-800 dark:text-neutral-100 focus:border-neutral-400/80 focus:ring-4 focus:ring-neutral-400/10 dark:border-neutral-700/80 dark:focus:ring-neutral-600/10 dark:placeholder:text-neutral-500 focus:shadow-none focus:outline-none placeholder-neutral-600/80 font-normal antialiased font-sans w-full shadow-neutral-200/30 shadow-sm dark:shadow-none">
+          <%%= icon "magnifying-glass", class: "absolute stroke-neutral-400 size-4 top-3 left-3" %>
+        </div>
+      </div>
+
+      <!-- List of options -->
+      <ul role="presentation">
+        <li id="option-1" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-3" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+          Corg 3
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <%%= icon "check", class: "text-neutral-500 dark:text-neutral-50 size-4" %>
+          </span>
+        </li>
+        <li id="option-2" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-value="corg-3.5" data-railsui-combobox-target="option" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer text-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" role="option" tabindex="0">
+          Corg 3.5
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <%%= icon "check", class: "text-neutral-500 dark:text-neutral-50 size-4" %>
+          </span>
+        </li>
+        <li id="option-3" aria-selected="false" data-action="click->railsui-combobox#selectOption keydown.enter->railsui-combobox#selectOption" data-railsui-combobox-target="option" data-value="corg-4" class="flex items-center justify-between px-4 py-2 bg-white cursor-pointer hover:bg-neutral-100 text-neutral-800 dark:hover:bg-neutral-900 dark:bg-neutral-800 dark:text-neutral-100 aria-selected:dark:hover:bg-neutral-900 arias-selected:dark:bg-neutral-900 aria-selected:dark:text-neutral-100" tabindex="0" role="option">
+          Corg 4
+
+          <span data-railsui-combobox-target="checkmark" class="hidden" aria-hidden="true">
+            <%%= icon "check", class: "text-neutral-500 dark:text-neutral-50 size-4" %>
+          </span>
+        </li>
+      </ul>
+
+      <!-- No results message -->
+      <div data-railsui-combobox-target="noresults" class="hidden px-4 py-2 text-neutral-500" aria-hidden="true">
+        No results found
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+// requires stimulus.js to be configured
+
+import { RailsuiCombobox } from "railsui-stimulus"
+application.register('railsui-combobox', RailsuiCombobox)
+<% end %>
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/dropdown/_base.html.erb

@@ -0,0 +1,61 @@
+<div id="dropdown-base">
+<%= render layout: example, locals: { heading: "Base", section: "Dropdown" } do %>
+
+<%= render preview('neutral') do %>
+<div class="flex md:flex-row flex-col flex-wrap items-center justify-start md:space-x-3 space-x-0 space-y-3 md:space-y-0 font-tiktok">
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown", label: "Dropdown", class: "btn-primary" %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown", label: "Dropdown", class: "btn-ghost" %>
+
+<%= render "railsui/themes/#{Railsui.config.theme.downcase}/components/dropdown/dropdown", label: "Dropdown", class: "btn-white" %>
+</div>
+<% end %>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <button type="button" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" class="btn btn-primary pr-2.5 gap-2">
+    Dropdown
+    <%%= icon "chevron-down", class: "size-3" %>
+  </button>
+  <div
+    class="hidden dropdown-menu top-10"
+    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"
+    >
+    <a href="#" class="dropdown-item">Bookmark</a>
+    <a href="#" class="dropdown-item">Report</a>
+    <a href="#" class="dropdown-item">Export</a>
+  </div>
+</div>
+<% end %>
+
+<% content_for :erb, flush: true do %>
+<div data-controller="railsui-dropdown" class="relative inline-block">
+  <%%= button_tag data: { action: "click->railsui-dropdown#toggle click@window->railsui-dropdown#hide" }, class: "btn btn-primary gap-2 pr-2.5" do %>
+    Dropdown
+    <%%= icon "chevron-down", class: "size-3" %>
+  <%% end %>
+  <div
+    class="hidden dropdown-menu top-10"
+    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"
+    >
+    <%%= link_to "Bookmark", "#", class: "dropdown-item" %>
+    <%%= link_to "Report", "#", class: "dropdown-item" %>
+    <%%= link_to "Export", "#", class: "dropdown-item" %>
+  </div>
+</div>
+<% end %>
+
+
+<%= render_snippet active_tab: :erb %>
+<% end %>
+<% end %>
+</div>