railsui 3.1.5 → 3.2.1

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

@@ -0,0 +1,110 @@
+<div id="modal-base">
+<%= render layout: example, locals: { heading: "Base", section: "Modal" } do %>
+
+<div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-neutral-800 dark:border-t dark:border-x dark:border-neutral-600 font-tiktok">
+  <div class="rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 prose origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200">
+    <h3 id="modal-title" class="h3">Hang on one sec</h3>
+
+    <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+      <p>Review and accept our updated terms of service before continuing. These changes help protect you and our service.</p>
+    </div>
+
+    <div class="flex justify-end items-center flex-wrap gap-4">
+      <button class="btn btn-primary">Close</button>
+    </div>
+  </div>
+</div>
+
+<div data-controller="railsui-modal">
+  <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-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
+    </button>
+  </div>
+
+  <div
+    aria-labelledby="modal-title"
+    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-2xl shadow-xl max-w-lg bg-white m-1 p-8 prose origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200">
+        <h3 id="modal-title" class="h3">Hang on one sec</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Review and accept our updated terms of service before continuing. These changes help protect you and our service.</p>
+        </div>
+
+        <div class="flex justify-end items-center flex-wrap gap-4">
+          <button class="btn btn-primary" data-action="click->railsui-modal#close">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :html, flush: true do %>
+<div data-controller="modal">
+  <button type="button" data-action="click->modal#open" class="btn btn-primary" tabindex="0">
+    Open modal
+  </button>
+
+  <div
+    aria-labelledby="modal-title"
+    aria-modal="true"
+    data-action="keyup@window->modal#closeWithEsc"
+    data-modal-target="container"
+    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-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-2xl shadow-xl max-w-lg bg-white m-1 p-8 prose origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200">
+        <h3 id="modal-title" class="h3">Hang on one sec</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Review and accept our updated terms of service before continuing. These changes help protect you and our service.</p>
+        </div>
+
+        <div class="flex justify-end items-center flex-wrap gap-4">
+          <button class="btn btn-primary" data-action="click->railsui-modal#close">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+
+<% content_for :js, flush: true do %>
+import { RailsuiModal } from 'railsui-stimulus'
+
+application.register('railsui-modal', RailsuiModal)
+<% end %>
+
+<%= render_snippet(js_filename: "index.js") %>er.js") %>
+<% end %>
+<% end %>
+</div>

data/app/views/railsui/themes/corgie/components/modal/_centered_dual_action.html.erb

@@ -0,0 +1,124 @@
+<div id="modal-centered-dual-action">
+<%= render layout: example, locals: { heading: "Centered dual action", section: "Modal" } do %>
+
+<div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-neutral-800 dark:border-t dark:border-x dark:border-neutral-600">
+  <div class="rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+    <div class="flex justify-center">
+      <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+        <%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+      </div>
+    </div>
+    <h3 id="dual-action-modal-title" class="h3 mt-3">Time to launch</h3>
+
+    <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+      <p>Are you sure you want to launch this project to production? This action cannot be undone and will be visible to all users.</p>
+    </div>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+      <button class="btn btn-white w-full sm:order-1 order-2">Cancel</button>
+      <button class="btn btn-primary w-full sm:order-2 order-1">Proceed to launch</button>
+    </div>
+  </div>
+</div>
+
+<div data-controller="railsui-modal">
+  <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-600 dark:border-t">
+    <div class="absolute top-4 left-4">
+      <%= doc_label :demo %>
+    </div>
+    <button type="button" data-action="click->railsui-modal#open:prevent" class="btn btn-primary" tabindex="0">Open centered dual action modal</button>
+  </div>
+
+  <div
+    aria-labelledby="dual-action-modal-title"
+    aria-modal="true"
+    data-action="keyup@window->railsui-modal#closeWithEsc"
+    data-railsui-modal-target="container"
+    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-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+        <div class="flex justify-center">
+          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+            <%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+          </div>
+        </div>
+        <h3 id="dual-action-modal-title" class="h3 mt-3">Time to launch</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Are you sure you want to launch this project to production? This action cannot be undone and will be visible to all users.</p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <button class="btn btn-white w-full sm:order-1 order-2" data-action="click->railsui-modal#close">Cancel</button>
+          <button class="btn btn-primary w-full sm:order-2 order-1">Proceed to launch</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:prevent" class="btn btn-primary" tabindex="0">Open centered dual action modal</button>
+
+  <div
+    aria-labelledby="dual-action-modal-title"
+    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-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 text-center">
+        <div class="flex justify-center">
+          <div class="w-12 h-12 rounded-full bg-emerald-50 flex items-center justify-center mb-3">
+            <%%= icon "rocket-launch", class: "size-6 text-emerald-600 flex-shrink-0" %>
+          </div>
+        </div>
+        <h3 id="dual-action-modal-title" class="h3 mt-3">Time to launch</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mt-2 mb-6">
+          <p>Are you sure you want to launch this project to production? This action cannot be undone and will be visible to all users.</p>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <button class="btn btn-white w-full sm:order-1 order-2" data-action="click->railsui-modal#close">Cancel</button>
+          <button class="btn btn-primary w-full sm:order-2 order-1">Proceed to launch</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% 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/corgie/components/modal/_dismiss_icon.html.erb

@@ -0,0 +1,124 @@
+<div id="modal-with-dismiss-button">
+<%= render layout: example, locals: { heading: "With dismiss button", section: "Modal" } do %>
+
+<div class="bg-black/80 flex items-center jusity-center p-10 rounded-t-lg dark:bg-neutral-800 dark:border-t dark:border-x dark:border-neutral-600">
+  <div class="rounded-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+    <button type="button" class="absolute top-2 right-2 size-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50" data-action="click->railsui-modal#close">
+      <%= icon "x-mark", class: "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+    </button>
+    <div class="flex-1">
+      <h3 class="h3">Delete account</h3>
+
+      <div class="prose prose-neutral dark:prose-invert mb-6 mt-2 pr-6">
+        <p>Once your account is deleted it is gone for good. There is no data saved that we keep on hand. Are you sure you want to continue?</p>
+      </div>
+
+      <div class="flex justify-end items-center space-x-3">
+        <button class="btn btn-ghost">Cancel</button>
+        <button class="btn bg-red-600 text-white focus:ring-red-100 hover:bg-red-700 hover:shadow-sm hover:shadow-neutral-600/10">Delete</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div data-controller="railsui-modal">
+  <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-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 dismissable with icon modal
+    </button>
+  </div>
+  <div
+    aria-labelledby="dismissable-action-modal-title"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    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-action="keyup@window->railsui-modal#closeWithEsc"
+      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-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+
+        <button type="button" class="absolute top-2 right-2 size-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50" data-action="click->railsui-modal#close">
+          <%= icon "x-mark", class: "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+        </button>
+
+        <h3 class="h3">Delete account</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mb-6 mt-2 pr-6">
+          <p>Once your account is deleted it is gone for good. There is no data saved that we keep on hand. Are you sure you want to continue?</p>
+        </div>
+
+        <div class="flex justify-end items-center space-x-3">
+          <button class="btn btn-ghost" data-action="click->railsui-modal#close">Cancel</button>
+          <button class="btn bg-red-600 text-white focus:ring-red-100 hover:bg-red-700 hover:shadow-sm hover:shadow-neutral-600/10">Delete</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 dismissable with icon modal
+  </button>
+  <div
+    aria-labelledby="dismissable-action-modal-title"
+    aria-modal="true"
+    data-railsui-modal-target="container"
+    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-action="keyup@window->railsui-modal#closeWithEsc"
+      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-2xl shadow-xl max-w-lg bg-white m-1 p-8 origin-bottom mx-auto dark:bg-neutral-700 dark:text-neutral-200 relative">
+        <button type="button" class="absolute top-2 right-2 size-8 bg-transparent hover:bg-neutral-50 flex items-center justify-center rounded-full group dark:hover:bg-neutral-50/50" data-action="click->railsui-modal#close">
+          <%%= icon "x-mark", class: "text-neutral-400 size-6 group-hover:text-neutral-500 pointer-events-none dark:group-hover:text-neutral-800 dark:text-neutral-400" %>
+        </button>
+
+        <h3 class="h3">Delete account</h3>
+
+        <div class="prose prose-neutral dark:prose-invert mb-6 mt-2 pr-6">
+          <p>Once your account is deleted it is gone for good. There is no data saved that we keep on hand. Are you sure you want to continue?</p>
+        </div>
+
+        <div class="flex justify-end items-center space-x-3">
+          <button class="btn btn-light" data-action="click->railsui-modal#close">Cancel</button>
+          <button class="btn bg-red-600 text-white focus:ring-red-100 hover:bg-red-700 hover:shadow-sm hover:shadow-neutral-600/10">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% 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/corgie/components/modal/_settings.html.erb

@@ -0,0 +1,201 @@
+<div id="modal-settings">
+<%= render layout: example, locals: { heading: "Base", section: "Modal" } do %>
+
+<%= render preview('neutral') do %>
+<div class="rounded-2xl shadow-xl max-w-4xl w-[600px] bg-white overflow-hidden outline-1 outline-neutral-300/90 dark:bg-neutral-900/80 dark:backdrop-blur-sm dark:outline-neutral-600/80 dark:shadow-black/90">
+  <div class="flex max-h-[500px] overflow-y-auto md:h-[500px]" data-controller="railsui-tabs"
+    data-railsui-tabs-active-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg bg-neutral-200/90 dark:bg-neutral-700/80 hover:bg-neutral-100 dark:hover:bg-neutral-700/80 w-full text-sm dark:backdrop-blur-sm transition-colors duration-100"
+    data-railsui-tabs-inactive-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm w-full text-sm transition-colors duration-100">
+
+    <!-- Sidebar Navigation -->
+    <div
+      class="flex flex-col w-full border-r bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 shrink-0 md:w-45">
+
+      <!-- Close Button (Desktop) -->
+      <div class="md:py-3 py-2 px-2.5 md:block flex justify-end">
+        <button data-action="click->railsui-modal#close"
+          class="flex items-center justify-center rounded-full size-8 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+          aria-label="Close">
+          <%= icon "x-mark", class: "md:size-5 size-7 stroke-current" %>
+        </button>
+      </div>
+
+      <!-- Navigation Tabs -->
+      <nav
+        class="flex items-center px-2 pb-2 overflow-x-auto md:block md:py-0 md:space-y-1 md:flex-1 snap-x snap-mandatory shadow-transparent">
+        <%= render "rui/shared/settings/nav_item", nav_icon: "cog-6-tooth", label: "General" %>
+
+        <%= render "rui/shared/settings/nav_item", nav_icon: "credit-card", label: "Billing" %>
+
+        <%= render "rui/shared/settings/nav_item", nav_icon: "bell", label: "Notifications" %>
+
+        <%= render "rui/shared/settings/nav_item", nav_icon: "user-circle", label: "Personalization" %>
+
+        <%= render "rui/shared/settings/nav_item", nav_icon: "circle-stack", label: "Data controls" %>
+
+        <%= render "rui/shared/settings/nav_item", nav_icon: "lock-closed", label: "Security" %>
+      </nav>
+    </div>
+
+    <!-- Content Area -->
+    <div class="flex flex-col flex-1 md:overflow-hidden">
+      <!-- Tab Content -->
+      <div class="overflow-y-auto md:flex-1">
+
+        <!-- General Tab -->
+        <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+          <%= render "rui/shared/settings/panels/general" %>
+        </div>
+
+        <!-- Billing Tab -->
+        <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+          <%= render "rui/shared/settings/panels/billing" %>
+        </div>
+
+        <!-- Notifications Tab -->
+        <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+          <%= render "rui/shared/settings/panels/notifications" %>
+        </div>
+
+        <!-- Personalization Tab -->
+        <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+          <%= render "rui/shared/settings/panels/personalization" %>
+        </div>
+
+        <!-- Data Controls Tab -->
+        <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+          <%= render "rui/shared/settings/panels/data_controls" %>
+        </div>
+
+        <!-- Security Tab -->
+        <div data-railsui-tabs-target="panel" class="hidden px-4 py-6">
+          <%= render "rui/shared/settings/panels/security" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<div data-controller="railsui-modal">
+  <div class="flex justify-center p-6 border-x border-b border-neutral-200 rounded-b-lg relative dark:bg-neutral-700 dark:border-neutral-600 dark:border-t">
+    <div class="absolute top-4 left-4">
+      <%= doc_label :demo %>
+    </div>
+    <button type="button" data-action="click->railsui-modal#open:prevent" class="btn btn-primary" tabindex="0">
+      Open settings modal
+    </button>
+  </div>
+  <%= render "rui/shared/settings/modal" %>
+</div>
+
+<% content_for :example, flush: true do %>
+<% content_for :erb, flush: true do %>
+  <!-- Contain element with controller and use button to launch modal -->
+<div data-controller="railsui-modal">
+  <button type="button" data-action="click->railsui-modal#open:prevent" class="btn btn-primary" tabindex="0">
+    Open settings modal
+  </button>
+
+  <!-- app/views/rui/shared/settings/_modal.html.erb -->
+  <div aria-labelledby="settings" aria-modal="true" data-railsui-modal-target="container"
+    data-action="keyup@window->railsui-modal#closeWithEsc"
+    class="fixed inset-0 z-50 hidden p-4 overflow-y-auto dark:bg-black/60 backdrop-blur-sm bg-black/30">
+    <div class="relative flex items-center justify-center w-full h-screen">
+      <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-2xl shadow-xl max-w-4xl w-[680px] bg-white overflow-hidden outline-1 outline-neutral-300/90 dark:bg-neutral-900/80 dark:backdrop-blur-sm dark:outline-neutral-600/80 dark:shadow-black/90">
+
+        <!-- Modal Content -->
+        <div class="md:flex max-h-[500px] overflow-y-auto md:h-[500px]" data-controller="railsui-tabs"
+          data-railsui-tabs-active-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg bg-neutral-200/90 dark:bg-neutral-700/80 hover:bg-neutral-100 dark:hover:bg-neutral-700/80 w-full text-sm dark:backdrop-blur-sm transition-colors duration-100"
+          data-railsui-tabs-inactive-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm w-full text-sm transition-colors duration-100">
+
+          <!-- Sidebar Navigation -->
+          <div
+            class="flex flex-col w-full border-r bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 shrink-0 md:w-45 ">
+
+            <!-- Close Button (Desktop) -->
+            <div class="md:py-3 py-2 px-2.5 md:block flex justify-end">
+              <button data-action="click->railsui-modal#close"
+                class="flex items-center justify-center rounded-full size-8 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                aria-label="Close">
+                <%%= icon "x-mark", class: "md:size-5 size-7 stroke-current" %>
+              </button>
+            </div>
+
+            <!-- Navigation Tabs -->
+            <nav
+              class="flex items-center px-2 pb-2 overflow-x-auto md:block md:py-0 md:space-y-1 md:flex-1 snap-x snap-mandatory shadow-transparent">
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "cog-6-tooth", label: "General" %>
+
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "credit-card", label: "Billing" %>
+
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "bell", label: "Notifications" %>
+
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "user-circle", label: "Personalization" %>
+
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "circle-stack", label: "Data controls" %>
+
+              <%%= render "rui/shared/settings/nav_item", nav_icon: "lock-closed", label: "Security" %>
+            </nav>
+          </div>
+
+          <!-- Content Area -->
+          <div class="flex flex-col flex-1 md:overflow-hidden">
+            <!-- Tab Content -->
+            <div class="overflow-y-auto md:flex-1">
+
+              <!-- General Tab -->
+              <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+                <%%= render "rui/shared/settings/panels/general" %>
+              </div>
+
+              <!-- Billing Tab -->
+              <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+                <%%= render "rui/shared/settings/panels/billing" %>
+              </div>
+
+              <!-- Notifications Tab -->
+              <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+                <%%= render "rui/shared/settings/panels/notifications" %>
+              </div>
+
+              <!-- Personalization Tab -->
+              <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+                <%%= render "rui/shared/settings/panels/personalization" %>
+              </div>
+
+              <!-- Data Controls Tab -->
+              <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+                <%%= render "rui/shared/settings/panels/data_controls" %>
+              </div>
+
+              <!-- Security Tab -->
+              <div data-railsui-tabs-target="panel" class="hidden px-4 py-6">
+                <%%= render "rui/shared/settings/panels/security" %>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>
+
+<% content_for :js, flush: true do %>
+import { RailsuiModal, RailsuiTabs } from 'railsui-stimulus'
+
+application.register('railsui-modal', RailsuiModal)
+application.register('railsui-tabls', RailsuiTabs)
+<% end %>
+
+<%= render_snippet(js_filename: "index.js") %>") %>
+<% end %>
+<% end %>
+</div>