railsui 3.1.5 → 3.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73cda896180c2a0065e8c6e57a8a5cf30208d4105b646210bbf4c6a5b0b8e875
-  data.tar.gz: 1ce88c1c03184bd46cce71baa93285ad7091ab483066c2da8347450f9a66f744
+  metadata.gz: ed0afed04a31c3601fa28d627139cf9beeeae1f6942145d7fc5afe13c45b5a52
+  data.tar.gz: 398a15d566a2ab1475163dfc4c1a1556224275844851470507630a565ce378a2
 SHA512:
-  metadata.gz: beee179f8afdf42c9db104e989cbdaeaef6472edb1bd0b5c667e07cf3f6c4a01f4d89898268c607b38a3f3c7996eb95eaa3eacb4f71b3293e9cd7be6bec509d8
-  data.tar.gz: 38dd6ca8c1bb3847bbf655b181da031e31913238e631ff87b73210ff76e5d30713b499edf9985db80f0a78aaac93eb1fc32c361d928b6ea316fb3bd5ac6f934a
+  metadata.gz: d84dc75043ce4fd499160a50e5ca49920b9f6ee89218e507f5db1c154528eb3a58adb4b5ff3ae026ab249dbedd116ff6729a66540043a2fb777865f189a51078
+  data.tar.gz: 140bb54f5d6485de25014c7a443382cb13abe6ce86596f9262944c5a75afd410fa8d6a3c1356903b08f9dd2a6b93a19d4136945c3dfeea61da8e967d5f6140d8

data/.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(grep:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    railsui (3.1.5)
+    railsui (3.2.0)
       meta-tags
       psych
       rails (>= 7.0)
@@ -80,7 +80,7 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-    ast (2.4.2)
+    ast (2.4.3)
     base64 (0.2.0)
     bigdecimal (3.1.8)
     builder (3.3.0)
@@ -100,8 +100,8 @@ GEM
     irb (1.14.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
-    json (2.7.2)
-    language_server-protocol (3.17.0.3)
+    json (2.13.2)
+    language_server-protocol (3.17.0.5)
     lint_roller (1.1.0)
     logger (1.6.1)
     loofah (2.22.0)
@@ -133,10 +133,11 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.2-x86_64-linux-gnu)
       racc (~> 1.4)
-    parallel (1.26.3)
-    parser (3.3.4.2)
+    parallel (1.27.0)
+    parser (3.3.9.0)
       ast (~> 2.4.1)
       racc
+    prism (1.4.0)
     psych (5.1.2)
       stringio
     racc (1.8.1)
@@ -183,50 +184,51 @@ GEM
     rake (13.2.1)
     rdoc (6.7.0)
       psych (>= 4.0.0)
-    regexp_parser (2.9.2)
+    regexp_parser (2.10.0)
     reline (0.5.10)
       io-console (~> 0.5)
-    rexml (3.3.5)
-      strscan
-    rubocop (1.65.1)
+    rubocop (1.75.8)
       json (~> 2.3)
-      language_server-protocol (>= 3.17.0)
+      language_server-protocol (~> 3.17.0.2)
+      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.4, < 3.0)
-      rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      regexp_parser (>= 2.9.3, < 3.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.32.1)
-      parser (>= 3.3.1.0)
-    rubocop-performance (1.21.1)
-      rubocop (>= 1.48.1, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
+    rubocop-ast (1.46.0)
+      parser (>= 3.3.7.2)
+      prism (~> 1.4)
+    rubocop-performance (1.25.0)
+      lint_roller (~> 1.1)
+      rubocop (>= 1.75.0, < 2.0)
+      rubocop-ast (>= 1.38.0, < 2.0)
     ruby-progressbar (1.13.0)
     securerandom (0.3.1)
-    standard (1.40.0)
+    standard (1.50.0)
       language_server-protocol (~> 3.17.0.2)
       lint_roller (~> 1.0)
-      rubocop (~> 1.65.0)
+      rubocop (~> 1.75.5)
       standard-custom (~> 1.0.0)
-      standard-performance (~> 1.4)
+      standard-performance (~> 1.8)
     standard-custom (1.0.2)
       lint_roller (~> 1.0)
       rubocop (~> 1.50)
-    standard-performance (1.4.0)
+    standard-performance (1.8.0)
       lint_roller (~> 1.1)
-      rubocop-performance (~> 1.21.0)
+      rubocop-performance (~> 1.25.0)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.1)
-    strscan (3.1.0)
     thor (1.3.2)
     timeout (0.4.1)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (2.5.0)
+    unicode-display_width (3.1.4)
+      unicode-emoji (~> 4.0, >= 4.0.4)
+    unicode-emoji (4.0.4)
     useragent (0.16.10)
     webrick (1.8.1)
     websocket-driver (0.7.6)

data/README.md

@@ -28,7 +28,7 @@ rails new app_name -c tailwind -j esbuild
 
 It's recommended to use the `-j` flag to one of the bundling solutions from the [`jsbundling-rails`](https://github.com/rails/jsbundling-rails) gem (bun, esbuild rollup, webpack) for max compatibility.
 
-Support for [importmaps](https://github.com/rails/importmap-rails) or [propshaft](https://github.com/rails/propshaft) is untested at this time.
+Support for [importmaps](https://github.com/rails/importmap-rails) or [propshaft](https://github.com/rails/propshaft) is not available at this time.
 
 ### Existing applications
 

data/app/assets/stylesheets/railsui/railsui.css

@@ -295,3 +295,21 @@
 .animate-toast-from-left {
   animation: toast-from-left 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
 }
+
+.railsui .flash {
+  padding: 1rem;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  color: white;
+}
+
+.railsui .flash-notice {
+  background-color: navy;
+}
+
+.railsui .flash-alert {
+  background-color: red;
+}

data/app/helpers/railsui/application_helper.rb

@@ -13,7 +13,8 @@ module Railsui
       active_class = html_options.delete(:active_class) || "nav-link-active"
       inactive_class = html_options.delete(:inactive_class) || ""
 
-      active = if (paths = Array.wrap(starts_with)) && paths.present?
+      active =
+      if (paths = Array.wrap(starts_with)) && paths.present?
         paths.any? { |path| request.path.start_with?(path) }
       else
         request.path == url
@@ -82,8 +83,9 @@ module Railsui
       content_tag tag.to_sym, text, id: id, class: "#{classes} tracking-[-0.025em]"
     end
 
-    def email_viewer(subject="A sample subject", &block)
-      render "railsui/shared/rui_email_preview", subject: subject, block: block, flush: true
+    def email_viewer(subject="A sample subject", variant: nil, &block)
+      variant ||= "gray" # Default to gray if no variant specified
+      render "railsui/shared/rui_email_preview", subject: subject, variant: variant, block: block, flush: true
     end
 
     def box_label_classes(options={})
@@ -98,7 +100,7 @@ module Railsui
       dark:ring-transparent"
     end
 
-    def help_text &block
+    def help_text
       content_tag :div, class: "prose prose-sm prose-neutral dark:prose-invert max-w-full" do
         yield
       end
@@ -206,7 +208,8 @@ module Railsui
     end
 
     def rui_badge(label, variant: :blue)
-      variant_class = case variant
+      variant_class =
+        case variant
         when :blue
           "bg-blue-500 text-white"
         when :green
@@ -217,7 +220,7 @@ module Railsui
           "bg-yellow-500 text-black"
         when :gray
           "bg-neutral-200 text-neutral-700"
-      end
+        end
       content_tag :div, label, class: "#{variant_class} rounded-full px-2 py-1 text-xs font-semibold inline-flex my-0"
     end
 
@@ -232,16 +235,18 @@ module Railsui
     def button_classes(variant: "black", size: "md")
       base_classes = "rounded-md px-3 py-[5px] ring-4 ring-transparent text-base transition-colors ease-in-out duration-300 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed text-center text-[14.5px] font-semibold inline-flex gap-2 items-center justify-center"
 
-      size_classes = case size
-      when "lg"
-        "py-3 px-6 text-lg"
-      when "sm"
-        "py-0.5 px-3 text-[13.5px]"
-      else # md
-        "py-[5px] px-3 text-[14.5px]"
-      end
-
-      variant_classes = case variant
+      size_classes =
+        case size
+        when "lg"
+          "py-3 px-6 text-lg"
+        when "sm"
+          "py-0.5 px-3 text-[13.5px]"
+        else # md
+          "py-[5px] px-3 text-[14.5px]"
+        end
+
+      variant_classes =
+      case variant
       when "white"
         "bg-white hover:bg-neutral-50/50 hover:shadow-none shadow-xs text-neutral-800/80 border border-neutral-300 shadow-neutral-300/20 focus:ring-4 hover:border-neutral-600/40 focus:ring-neutral-100/70 focus:border-neutral-300/90 dark:bg-neutral-700/60 dark:text-white dark:border-neutral-500/30 dark:shadow-neutral-950/40 dark:hover:bg-neutral-800/90 dark:focus:ring-neutral-700/80 dark:focus:border-neutral-500/80"
       when "offwhite"
@@ -257,7 +262,7 @@ module Railsui
 
 
     def snippet_classes(variant: "active")
-      case variant_classes = variant
+      case variant
       when "active"
         "bg-white px-3 py-1.5 rounded-md shadow flex items-center justify-center gap-2 text-[13px] font-semibold focus:ring-4 focus:ring-blue-600 group dark:bg-neutral-800/90 dark:text-neutral-100 dark:focus:ring-blue-600/50 dark:text-neutral-300"
       when "inactive"

data/app/helpers/railsui/host_route_fallback_helper.rb

@@ -0,0 +1,18 @@
+module Railsui
+  module HostRouteFallbackHelper
+    def main_app
+      Rails.application.routes.url_helpers
+    end
+
+    def method_missing(name, *args, &blk)
+      if name.to_s.end_with?('_path', '_url') && main_app.respond_to?(name)
+        return main_app.public_send(name, *args, &blk)
+      end
+      super
+    end
+
+    def respond_to_missing?(name, include_private = false)
+      (name.to_s.end_with?('_path', '_url') && main_app.respond_to?(name)) || super
+    end
+  end
+end

data/app/models/railsui/default.rb

@@ -2,125 +2,44 @@ module Railsui
   class Default
     THEMES = {
       hound: {
-        name: "Hound",
-        preview_link: "https://hound.railsui.com/",
-        thumbnail: "tailwind-hound-thumbnail.jpg"
+        name: 'Hound',
+        preview_link: 'https://hound.railsui.com/',
+        thumbnail: 'tailwind-hound-thumbnail.jpg',
+        category: 'CRM/Project Management'
       },
       shepherd: {
-        name: "Shepherd",
-        preview_link: "https://shepherd-a4r.pages.dev/",
-        thumbnail: "tailwind-shepherd-thumbnail.jpg"
-      }
-    }
-
-    THEME_COLORS = {
-      "default" => {
-        primary: {
-          "50": "#eef2ff",
-          "100": "#e0e7ff",
-          "200": "#c7d2fe",
-          "300": "#a5b4fc",
-          "400": "#818cf8",
-          "500": "#6366f1",
-          "600": "#4f46e5",
-          "700": "#4338ca",
-          "800": "#3730a3",
-          "900": "#312e81",
-          "950": "#1e1b4b"
-        },
-        secondary: {
-          "50": "#f8fafc",
-          "100": "#f1f5f9",
-          "200": "#e2e8f0",
-          "300": "#cbd5e1",
-          "400": "#94a3b8",
-          "500": "#64748b",
-          "600": "#475569",
-          "700": "#334155",
-          "800": "#1e293b",
-          "900": "#0f172a",
-          "950": "#020617"
-        },
+        name: 'Shepherd',
+        preview_link: 'https://shepherd.railsui.com/',
+        thumbnail: 'tailwind-shepherd-thumbnail.jpg',
+        category: 'Property Management SaaS'
       },
-      "hound" => {
-        primary: {
-          "50": "#eef2ff",
-          "100": "#e0e7ff",
-          "200": "#c7d2fe",
-          "300": "#a5b4fc",
-          "400": "#818cf8",
-          "500": "#6366f1",
-          "600": "#4f46e5",
-          "700": "#4338ca",
-          "800": "#3730a3",
-          "900": "#312e81",
-          "950": "#1e1b4b"
-        },
-        secondary: {
-          "50": "#f8fafc",
-          "100": "#f1f5f9",
-          "200": "#e2e8f0",
-          "300": "#cbd5e1",
-          "400": "#94a3b8",
-          "500": "#64748b",
-          "600": "#475569",
-          "700": "#334155",
-          "800": "#1e293b",
-          "900": "#0f172a",
-          "950": "#020617"
-        },
-      },
-      "shepherd" => {
-        primary: {
-          "50": "#fff1f2",
-          "100": "#ffe4e6",
-          "200": "#fecdd3",
-          "300": "#fda4af",
-          "400": "#fb7185",
-          "500": "#f43f5e",
-          "600": "#e11d48",
-          "700": "#be123c",
-          "800": "#9f1239",
-          "900": "#881337",
-          "950": "#4c0519",
-        },
-        secondary: {
-          "50": "#eaf6fc",
-          "100": "#c1e3f7",
-          "200": "#98d1f2",
-          "300": "#6FBFED",
-          "400": "#46ACE7",
-          "500": "#1D9AE2",
-          "600": "#187eb9",
-          "700": "#126290",
-          "800": "#0D4667",
-          "900": "#082a3e",
-          "950": "#030E15",
-        }
+      corgie: {
+        name: 'Corgie',
+        preview_link: 'https://corgie.railsui.com/',
+        thumbnail: 'tailwind-corgie-thumbnail.jpg',
+        category: 'Artificial Intelligence'
       }
     }
 
     THEME_PAGES = {
-      default: ["about", "activity", "assignments", "billing",
-      "calendar", "dashboard", "integrations", "message",
-      "messages", "notifications", "people", "pricing",
-      "profile", "project", "projects", "settings", "team"],
-      hound: ["about", "activity", "assignments", "billing",
-      "calendar", "dashboard", "integrations", "message",
-      "messages", "notifications", "people", "pricing",
-      "profile", "project", "projects", "settings", "team"],
-      shepherd: ["about", "account_notifications" "account_payment_methods", "account_payouts", "account_preferences", "api", "booking", "bookings", "calendar", "changelog", "contact", "dashboard","edit_booking", "help_center", "inbox", "insights", "new_booking", "pricing", "privacy_policy", "properties", "terms"]
+      default: %w[about activity assignments billing
+                  calendar dashboard integrations message
+                  messages notifications people pricing
+                  profile project projects settings team],
+      hound: %w[about activity assignments billing
+                calendar dashboard integrations message
+                messages notifications people pricing
+                profile project projects settings team],
+      shepherd: %w[about account_notifications account_payment_methods account_payouts account_preferences api booking
+                   bookings calendar changelog contact dashboard edit_booking help_center inbox insights new_booking pricing privacy_policy properties terms],
+      corgie: %w[home pricing features blog blog_show blog_category about terms privacy_policy signup signin help chat_new chat_show]
     }
 
     BODY_CLASSES = {
-      default: "antialiased h-full bg-slate-50 dark:bg-slate-900 dark:text-slate-100 text-slate-800",
-      hound: "antialiased h-full bg-slate-50 dark:bg-slate-900 dark:text-slate-100 text-slate-800",
-      shepherd: "h-full antialiased text-zinc-800 leading-normal selection:bg-primary-100 selection:text-primary-700 dark:bg-zinc-900 bg-white dark:text-zinc-50 dark:selection:bg-zinc-500/40 dark:selection:text-zinc-200"
+      default: 'antialiased h-full bg-slate-50 dark:bg-slate-900 dark:text-slate-100 text-slate-800',
+      hound: 'antialiased h-full bg-slate-50 dark:bg-slate-900 dark:text-slate-100 text-slate-800',
+      shepherd: 'h-full antialiased text-zinc-800 leading-normal selection:bg-primary-100 selection:text-primary-700 dark:bg-zinc-900 bg-white dark:text-zinc-50 dark:selection:bg-zinc-500/40 dark:selection:text-zinc-200',
+      corgie: 'h-screen antialiased text-neutral-800 dark:text-neutral-50 dark:bg-neutral-900 bg-neutral-50'
     }
-
-    def self.theme_colors(theme)
-      theme_key = theme.to_s.downcase
-      THEME_COLORS[theme_key.to_s] || THEME_COLORS["default"]
-    end
   end
 end

data/app/views/railsui/admin/fields/_color.html.erb

@@ -5,7 +5,12 @@
   </div>
 
   <div class="mb-6 max-w-full prose prose-neutral dark:prose-invert">
-    <p>Rails UI includes two custom colors in addtion to Tailwind CSS 4's color palette: <code>primary</code> and <code>secondary</code>.</p>
+
+    <% if Railsui.config.theme == "corgie" %>
+      <p><strong>Corgie</strong> uses default Tailwind colors for its brand. You can add more custom colors inside <code>@theme</code> if necessary. Read the <%= link_to "Tailwind CSS documentation", "https://tailwindcss.com/docs/theme", target: :_blank %> for examples.</p>
+    <% else %>
+      <p>Rails UI includes two custom colors in addtion to Tailwind CSS 4's color palette: <code>primary</code> and <code>secondary</code>.</p>
+    <% end %>
 
     <% if File.exist?("#{Rails.root}/app/assets/stylesheets/railsui/theme.css") %>
       <h3 class="mb-0">theme.css</h3>

data/app/views/railsui/admin/fields/_theme.html.erb

@@ -17,7 +17,7 @@
       peer-checked:before:absolute
       peer-checked:before:top-0
       peer-checked:before:left-0
-      peer-checked:before:bg-black/95
+      peer-checked:before:bg-green-500/95
       dark:peer-checked:before:bg-amber-300
       dark:peer-checked:before:text-neutral-950
       dark:peer-checked:ring-amber-300
@@ -31,18 +31,26 @@
       peer-checked:shadow-black/10">
           <%= image_tag theme[:thumbnail], alt: "#{theme[:name]} theme" %>
         </label>
-        <div class="mt-4 flex items-center justify-between gap-2">
-          <p class="font-semibold text-base my-2">
-            <%= theme[:name] %>
-          </p>
-          <%= link_to theme[:preview_link], target: :_blank, class: "inline-flex text-sm items-center gap-2 font-medium text-sm py-1 px-2 rounded-md border border-neutral-300 dark:border-neutral-600 hover:shadow-sm" do %>
-            <span>Preview</span>
-          <% end %>
+        <div class="mt-4">
+          <div class="flex flex-col gap-1">
+            <p class="font-semibold text-base mb-1">
+              <%= theme[:name] %>
+            </p>
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
+              <%= theme[:category] %>
+            </p>
+            <%= link_to theme[:preview_link], target: :_blank, class: "text-sm font-medium hover:underline flex items-center gap-1.5"  do %>
+              <p>Preview</p>
+              <%= icon "arrow-up-right", class: "size-3 stroke-neutral-400" %>
+            <% end %>
+           </div>
         </div>
       </li>
     <% end %>
   </ul>
 
+  <%= render "railsui/shared/full_access_cta" %>
+
   <p class="pt-4 tracking-wide text-neutral-500 dark:text-white">Theme FAQs</p>
 
   <div class="divide-y divide-gray-200 dark:divide-neutral-700">

data/app/views/railsui/shared/_flash_messages.html.erb

@@ -1,11 +1,11 @@
 <% if notice %>
-  <div class="bg-gradient-to-br from-indigo-700 to-indigo-600 text-white text-center py-1.5 z-50 relative rounded-lg mb-3" role="alert" data-controller="railsui-flash">
+  <div class="flash flash-notice" role="alert" data-controller="railsui-flash">
     <p><%= sanitize notice %></p>
   </div>
 <% end %>
 
 <% if alert %>
-  <div class="bg-gradient-to-br from-red-600 to-red-400 text-white text-center py-1.5 z-50 relative rounded-lg mb-3" role="alert" data-controller="railsui-flash">
+  <div class="flash flash-alert" role="alert" data-controller="railsui-flash">
     <p><%= sanitize alert %></p>
   </div>
 <% end %>

data/app/views/railsui/shared/_full_access_cta.html.erb

@@ -0,0 +1,27 @@
+<div class="relative">
+  <div class="rounded-full absolute z-0 w-full top-0 blur-lg opacity-10 dark:opacity-10 overflow-hidden bottom-0 inset-x-auto">
+    <div class="w-full h-4 bg-pink-400"></div>
+    <div class="w-full h-4 bg-indigo-400"></div>
+    <div class="w-full h-4 bg-purple-400"></div>
+  </div>
+<div class="rounded-4xl bg-white/80 border-dashed border-neutral-300/60 dark:bg-neutral-950/90 backdrop-blur-sm dark:border-neutral-700/80 p-8 border text-center flex flex-col items-center gap-4 mb-10 shadow-sm relative z-10 overflow-hidden">
+
+   <svg class="absolute inset-0 h-full w-full z-10 text-neutral-300/60 dark:text-neutral-400/70 opacity-25 [mask-image:linear-gradient(to_top,white,transparent)]" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid-pattern" width="32" height="32" patternUnits="userSpaceOnUse" x="50%" y="100%" patternTransform="translate(0 -1)"><path d="M0 32V.5H32" fill="none" stroke="currentColor"></path></pattern></defs><rect width="100%" height="100%" fill="url(#grid-pattern)"></rect></svg>
+
+    <div class="absolute -inset-x-4 -top-4 h-px bg-neutral-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)] lg:block hidden dark:bg-neutral-700/60"></div>
+
+    <div class="absolute -inset-x-4 -bottom-4 h-px bg-neutral-900/10 [mask-image:linear-gradient(to_right,transparent,white_4rem,white_calc(100%-4rem),transparent)] lg:block hidden dark:bg-neutral-700/60"></div>
+  
+    <svg class="size-8 fill-current text-neutral-900 dark:text-neutral-100" width="333" height="325" viewBox="0 0 333 325" fill="currentColor" 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>
+
+    <div class="relative z-20">
+      <p class="mb-6 text-neutral-600 dark:text-neutral-300">Unlock more themes and components with full access.</p>
+
+      <%= link_to "https://railsui.com/pricing", target: :_blank, class: "rounded-md px-3 py-[5px] ring-4 ring-transparent text-sm transition-colors ease-in-out duration-300 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed text-center text-[14.5px] font-semibold inline-flex gap-2 items-center justify-center py-[5px] px-3 text-[14.5px] bg-neutral-950 text-neutral-100 focus:ring-neutral-100/70 hover:text-neutral-50 hover:ring-4 hover:ring-black/10 focus:outline focus:outline-neutral-200/80 dark:focus:outline-neutral-700/80 dark:bg-neutral-50 dark:text-neutral-950 dark:hover:bg-neutral-100/80 dark:hover:text-neutral-950 dark:focus:ring-neutral-700/30 md:w-auto w-full whitespace-nowrap" do %>
+        Get full access
+        <%= icon "arrow-up-right", class: "size-3" %>
+       <% end %>
+      </div>
+    </div>
+</div>

data/app/views/railsui/shared/_preview.html.erb

@@ -1,3 +1,3 @@
-<div class="bg-white dark:bg-neutral-800 p-4 md:p-8 border border-neutral-200 rounded-xl dark:border-neutral-700 min-h-[240px]">
+<div class="bg-white dark:bg-neutral-900 p-4 md:p-8 border border-neutral-200 rounded-xl dark:border-neutral-700 min-h-[240px]">
   <%= yield %>
 </div>

data/app/views/railsui/shared/_rui_email_preview.html.erb

@@ -1,5 +1,62 @@
-<div class="relative my-10 bg-white border rounded-lg border-gray-200/80 dark:border-gray-700/80 dark:bg-gray-900">
-  <div class="flex px-6 py-4 space-x-2 text-sm text-gray-700 border-b rounded-t-lg border-gray-200/80 dark:text-white dark:border-gray-700/80">
+<%
+  # Map variant to color scheme
+  variant_color = local_assigns[:variant] || "gray"
+
+  # Define color classes based on variant
+  color_classes = case variant_color
+  when "neutral"
+    {
+      bg: "bg-white dark:bg-neutral-900",
+      border: "border-neutral-200/80 dark:border-neutral-700/80",
+      text: "text-neutral-700 dark:text-white",
+      badge_bg: "bg-neutral-300",
+      badge_text: "text-neutral-800"
+    }
+  when "gray"
+    {
+      bg: "bg-white dark:bg-gray-900",
+      border: "border-gray-200/80 dark:border-gray-700/80",
+      text: "text-gray-700 dark:text-white",
+      badge_bg: "bg-gray-300",
+      badge_text: "text-neutral-800"
+    }
+  when "stone"
+    {
+      bg: "bg-white dark:bg-stone-900",
+      border: "border-stone-200/80 dark:border-stone-700/80",
+      text: "text-stone-700 dark:text-white",
+      badge_bg: "bg-stone-300",
+      badge_text: "text-stone-800"
+    }
+  when "zinc"
+    {
+      bg: "bg-white dark:bg-zinc-900",
+      border: "border-zinc-200/80 dark:border-zinc-700/80",
+      text: "text-zinc-700 dark:text-white",
+      badge_bg: "bg-zinc-300",
+      badge_text: "text-zinc-800"
+    }
+  when "slate"
+    {
+      bg: "bg-white dark:bg-slate-900",
+      border: "border-slate-200/80 dark:border-slate-700/80",
+      text: "text-slate-700 dark:text-white",
+      badge_bg: "bg-slate-300",
+      badge_text: "text-slate-800"
+    }
+  else # Default to gray
+    {
+      bg: "bg-white dark:bg-gray-900",
+      border: "border-gray-200/80 dark:border-gray-700/80",
+      text: "text-gray-700 dark:text-white",
+      badge_bg: "bg-gray-300",
+      badge_text: "text-neutral-800"
+    }
+  end
+%>
+
+<div class="relative my-10 <%= color_classes[:bg] %> border rounded-lg <%= color_classes[:border] %>">
+  <div class="flex px-6 py-4 space-x-2 text-sm <%= color_classes[:text] %> border-b rounded-t-lg <%= color_classes[:border] %>">
     <ul class="text-right">
       <li>From:</li>
       <li>To:</li>
@@ -15,7 +72,7 @@
   </div>
 
   <div class="rui-mailer p-3 pb-10 min-h-[600px]">
-    <div class="absolute inline-block px-3 py-1 text-xs font-semibold bg-gray-300 rounded-full text-neutral-800 top-4 right-4">Email preview</div>
+    <div class="absolute inline-block px-3 py-1 text-xs font-semibold <%= color_classes[:badge_bg] %> rounded-full <%= color_classes[:badge_text] %> top-4 right-4">Email preview</div>
 
     <%= capture(&block) %>
   </div>