railsui 3.1.4 → 3.2.0

data/lib/generators/railsui/install/templates/themes/corgie/mail/railsui_mailer/transactional.html.erb

@@ -0,0 +1,55 @@
+<p>Hey User,</p>
+
+<p>Thanks for subscribing to Rails UI. This email contains the receipt from your purchase.</p>
+
+<p>The purchase will appear as <code>RAILSUI</code> on your credit card statement for the card ending in <code>1234</code>. You may <%= link_to "update your payment information", "#" %> at any time. Below you'll find the details of your order:</p>
+
+<%= spacer(8) %>
+
+<table class="mb-0">
+  <tbody>
+    <tr>
+      <td>
+        Order #2345
+      </td>
+      <td align="right">
+        01/01/23
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<hr />
+
+<table>
+  <thead>
+    <th align="left">Description</th>
+    <th align="right">Amount</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <%= link_to "Rails UI", "https://railsui.com", target: :_blank %>
+        <p class="small mb-0">Renews annually. Next charge on 01/01/24.</p>
+      </td>
+      <td align="right">
+        $1,000,000.00
+      </td>
+    </tr>
+    <tr>
+      <td>&nbsp;</td>
+    </tr>
+    <tr>
+      <td></td>
+      <td align="right">
+        <strong>Total: $1,000,000.00</strong>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+<%= spacer(16) %>
+
+<p>If you have any questions about this receipt or Rails UI, please reply to this email or reach out to our support team for help. Someone will get back to you within a few hours.</p>
+
+<%= email_action("View receipt", "#") %>

data/lib/generators/railsui/install/templates/themes/corgie/mail/railsui_mailer/transactional.text.erb

@@ -0,0 +1,22 @@
+Hey User,
+
+Thanks for subscribing to Rails UI. This email contains the receipt from your purchase.
+
+The purchase will appear as RAILSUI on your credit card statement for the card ending in 1234. You may update your payment information https://example.com at any time. Below you'll find the details of your order:
+
+Order #2345 01/01/23
+
+Description
+
+Rails UI https://railsui.com
+Renews annually. Next charge on 01/01/24.
+
+Amount
+
+$1,000,000.00
+
+Total: $1,000,000.00
+
+If you have any questions about this receipt or Rails UI, please reply to this email or reach out to our support team for help. Someone will get back to you within a few hours.
+
+View receipt https://example.com

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/actiontext.css

@@ -0,0 +1,173 @@
+/***************************************
+  Default ActionText
+****************************************/
+@import "trix/dist/trix";
+
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content
+  .attachment-gallery.attachment-gallery--2
+  > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+.trix-content
+  .attachment-gallery.attachment-gallery--4
+  > action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0;
+  max-width: 100%;
+}
+
+/***************************************
+  Custom ActionText
+****************************************/
+
+trix-toolbar .trix-button-group {
+  @apply border-none gap-px;
+}
+
+/* trix-toolbar .trix-button-row {
+  @apply scrollbar-thin scrollbar-track-white scrollbar-thumb-neutral-200 dark:scrollbar-track-transparent dark:scrollbar-thumb-neutral-700;
+} */
+
+trix-toolbar .trix-button {
+  @apply border-transparent hover:bg-neutral-50/50 rounded dark:hover:bg-neutral-500/50 dark:hover:text-white dark:bg-transparent dark:before:invert;
+
+  &[disabled] {
+    @apply dark:rounded dark:hover:bg-transparent dark:hover:text-neutral-500/10 hover:cursor-not-allowed;
+  }
+
+  &:before {
+    @apply dark:hover:opacity-100 dark:hover:text-white;
+  }
+
+  &:not(:first-child) {
+    @apply border-l-0;
+  }
+}
+
+trix-toolbar .trix-button.trix-active {
+  @apply bg-neutral-500/25 dark:bg-neutral-500/30 dark:before:text-neutral-50;
+}
+
+trix-toolbar .trix-dialog__link-fields .trix-button-group {
+  @apply gap-1.5;
+
+  &:not(:first-child) .trix-button--dialog {
+    @apply border-l;
+  }
+}
+
+trix-toolbar .trix-dialog {
+  @apply shadow-lg p-4 rounded border border-neutral-300 dark:border-neutral-600 dark:bg-neutral-900;
+}
+
+trix-toolbar .trix-input--dialog {
+  @apply px-3 py-1 text-sm border border-neutral-300 shadow-inner bg-white font-normal placeholder:text-neutral-500 rounded block w-full focus:outline-hidden focus:ring-4 pr-32 focus:ring-neutral-50 focus:border-neutral-500 text-neutral-900 focus:shadow-none dark:border-neutral-600/70 dark:placeholder:text-neutral-400 dark:focus:ring-neutral-500/30 dark:focus:border-neutral-500/50 dark:bg-neutral-800 dark:text-white;
+}
+
+trix-toolbar .trix-button.trix-button--dialog {
+  @apply border-neutral-300 bg-white dark:bg-neutral-900 dark:text-neutral-100 dark:focus:ring-neutral-500/30 dark:hover:bg-neutral-800/50 text-sm text-neutral-800 px-2 py-1 focus:ring-4 focus:ring-neutral-50 focus:border-neutral-500 hover:bg-neutral-50/50 shadow-sm font-medium dark:border-neutral-600;
+  border: 1px;
+  border-style: solid;
+
+  &:first-of-type {
+    @apply rounded-l;
+  }
+
+  &:last-child {
+    @apply rounded-r;
+  }
+}
+
+/* prose style content */
+trix-editor {
+  @apply rounded border border-neutral-300 focus:ring-4 focus:ring-neutral-50 focus:border-neutral-500 focus-within:ring-neutral-50 focus-within:border-neutral-500 focus:outline-hidden bg-white shadow-inner p-3 text-base dark:bg-neutral-800 dark:text-white dark:focus:ring-neutral-500/20 dark:border-neutral-700 font-tiktok;
+}
+
+trix-editor,
+.trix-content {
+  @apply leading-normal font-sans text-base break-words p-4 font-tiktok;
+
+  h1 {
+    @apply text-4xl font-normal text-neutral-800 dark:text-neutral-50 font-tiktok tracking-tight;
+  }
+
+  blockquote {
+    @apply border-0 border-solid border-neutral-300 border-l-4 ml-3 pl-6;
+  }
+
+  [dir="rtl"] blockquote,
+  blockquote[dir="rtl"] {
+    @apply border-0 border-r-4 mr-3 pr-6;
+  }
+
+  li {
+    @apply ml-4;
+  }
+
+  [dir="rtl"] li {
+    @apply mr-4;
+  }
+
+  pre {
+    @apply inline-block w-full align-top font-mono text-sm p-2 whitespace-pre bg-neutral-200 overflow-x-auto;
+  }
+
+  img {
+    @apply max-w-full h-auto;
+  }
+
+  .attachment__caption {
+    @apply mt-2 text-center;
+
+    .attachment__name + .attachment__size::before {
+      content: " \2022 ";
+    }
+  }
+
+  .attachment {
+    @apply inline-block relative max-w-full;
+
+    a {
+      @apply text-inherit no-underline;
+
+      &:hover,
+      &:visited:hover {
+        @apply text-inherit;
+      }
+    }
+
+    &--preview {
+      @apply w-full text-center;
+    }
+
+    &--file {
+      @apply text-neutral-800 leading-none m-0.5 p-2 border border-solid border-neutral-400 rounded-md;
+    }
+  }
+
+  .attachment-gallery {
+    @apply flex flex-wrap relative;
+
+    .attachment {
+      @apply flex-1 basis-1/3 px-2 max-w-[33%];
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      .attachment {
+        @apply basis-1/2 max-w-[50%];
+      }
+    }
+  }
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/blog.css

@@ -0,0 +1,29 @@
+@layer components {
+  .blog-content {
+    @apply prose prose-lg prose-neutral dark:prose-invert font-tiktok;
+
+    h1 {
+      @apply h1;
+    }
+
+    h2 {
+      @apply h2;
+    }
+
+    h3 {
+      @apply h3;
+    }
+
+    h4 {
+      @apply h4;
+    }
+
+    h5 {
+      @apply h5;
+    }
+
+    h6 {
+      @apply h6;
+    }
+  }
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/buttons.css

@@ -0,0 +1,49 @@
+@layer components {
+  .btn {
+    @apply inline-flex items-center gap-1.5 justify-center px-3 py-1.5 text-sm rounded-lg transition-all duration-200 cursor-pointer select-none font-medium disabled:opacity-50 disabled:cursor-not-allowed rounded-lg font-tiktok;
+  }
+
+  .btn-rounded {
+    @apply rounded-full;
+  }
+
+  .btn-square {
+    @apply rounded-none;
+  }
+
+  .btn-primary {
+    @apply text-white bg-neutral-900 hover:bg-neutral-950 focus:outline-none focus:ring-4 focus:ring-neutral-600/20 dark:bg-neutral-900 dark:border dark:border-neutral-600/80 dark:text-neutral-50 dark:hover:bg-neutral-950 dark:hover:shadow-sm dark:focus:ring-neutral-500/30;
+  }
+
+  .btn-dark {
+    @apply text-white bg-neutral-900 hover:bg-neutral-950 focus:outline-none focus:ring-4 focus:ring-neutral-600/50 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-100;
+  }
+
+  .btn-white {
+    @apply bg-white shadow-xs outline-1 outline-neutral-300/90 text-neutral-900 hover:bg-neutral-100 focus:outline-neutral-300/90 focus:ring-4 focus:ring-neutral-500/10 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-950 shadow-neutral-300/20 dark:outline-neutral-600/50 dark:hover:outline-neutral-600 dark:shadow-none;
+  }
+
+  .btn-muted {
+    @apply shadow-xs bg-neutral-100 text-neutral-700 hover:bg-neutral-200 focus:outline-none focus:ring-4 focus:ring-neutral-500/20 dark:bg-neutral-700 dark:text-neutral-100 dark:hover:bg-neutral-600 outline-1 outline-neutral-300/90 dark:outline-neutral-700/90 dark:bg-neutral-800 shadow-neutral-300/20;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent text-neutral-700 hover:bg-neutral-100 focus:outline-none focus:ring-4 focus:ring-neutral-500/20 dark:text-neutral-100 dark:hover:bg-neutral-700;
+  }
+
+  .btn-danger {
+    @apply text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-4 focus:ring-red-600/10 dark:bg-red-700 dark:hover:bg-red-600;
+  }
+
+  .btn-sm {
+    @apply px-2.5 py-1 text-xs;
+  }
+
+  .btn-lg {
+    @apply px-6 py-3 text-base;
+  }
+
+  .btn-link {
+    @apply dark:hover:text-white;
+  }
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/card.css

@@ -0,0 +1,9 @@
+@layer components {
+  .card {
+    @apply bg-white rounded-xl shadow-sm overflow-hidden outline-1 outline-neutral-300/80 p-6 dark:bg-neutral-800 dark:text-neutral-50 dark:outline-neutral-600/80 font-tiktok;
+  }
+
+  .card-muted {
+    @apply p-4 dark:bg-neutral-800 rounded-xl bg-neutral-50 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-950 transition-all text-left duration-200 font-tiktok;
+  }
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/chat.css

@@ -0,0 +1,27 @@
+/* Character Count States */
+.character-count-normal {
+  @apply text-neutral-500 dark:text-neutral-400;
+}
+
+.character-count-warning {
+  @apply font-medium text-amber-600 dark:text-amber-400;
+}
+
+.character-count-danger {
+  @apply font-bold text-red-600 dark:text-red-400;
+}
+
+.chat-shell {
+  @apply relative p-4 transition-all duration-200 bg-white shadow-sm dark:bg-neutral-800 rounded-4xl outline-1 outline-neutral-300/90 dark:outline-neutral-600/80;
+}
+
+.chat-input {
+  @apply w-full px-2 py-2 pr-10 bg-transparent border-0 outline-none resize-none text-neutral-900 dark:text-neutral-100 placeholder-neutral-500 dark:placeholder-neutral-400 text-base dark:focus:outline-neutral-700/80 leading-relaxed min-h-[30px] max-h-32;
+}
+
+.chat {
+  @apply bg-white rounded-l-3xl rounded-tr-3xl rounded-br-sm outline-1 outline-neutral-200/80 px-4 py-2.5 dark:bg-neutral-800 dark:text-neutral-50 dark:outline-neutral-600/80 dark:shadow-md dark:shadow-neutral-950/40;
+}
+
+.chat-inverse {
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/code.css

@@ -0,0 +1,233 @@
+.corgie-snippet {
+  [data-controller="snippet"] code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    line-height: 1.5em;
+  }
+
+  /* Smooth transitions for state changes */
+  [data-controller="snippet"] .transition-colors {
+    transition-property: color, background-color, border-color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  /* Focus states for accessibility */
+  [data-controller="snippet"] button:focus-visible {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+
+  /* Code block scrollbar styling */
+  [data-controller="snippet"] .overflow-auto::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  [data-controller="snippet"] .overflow-auto::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  [data-controller="snippet"] .overflow-auto::-webkit-scrollbar-thumb {
+    background-color: #d1d5db;
+    border-radius: 4px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-controller="snippet"] .overflow-auto::-webkit-scrollbar-thumb {
+      background-color: #4b5563;
+    }
+  }
+
+  [data-controller="snippet"] .overflow-auto::-webkit-scrollbar-thumb:hover {
+    background-color: #9ca3af;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-controller="snippet"] .overflow-auto::-webkit-scrollbar-thumb:hover {
+      background-color: #6b7280;
+    }
+  }
+
+  /* Github inspired theme */
+
+  @media (prefers-color-scheme: light) {
+    .hljs {
+      background: var(--color-white);
+      color: var(--color-neutral-800);
+      font-family: var(--font-mono);
+      font-size: 0.9em;
+      line-height: 1.5em;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-meta .hljs-keyword,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-variable.language_ {
+      color: #d73a49;
+    }
+    .hljs-title,
+    .hljs-title.class_,
+    .hljs-title.class_.inherited__,
+    .hljs-title.function_ {
+      color: #6f42c1;
+    }
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-operator,
+    .hljs-selector-attr,
+    .hljs-selector-class,
+    .hljs-selector-id,
+    .hljs-variable {
+      color: #005cc5;
+    }
+    .hljs-meta .hljs-string,
+    .hljs-regexp,
+    .hljs-string {
+      color: #032f62;
+    }
+    .hljs-built_in,
+    .hljs-symbol {
+      color: #e36209;
+    }
+    .hljs-code,
+    .hljs-comment,
+    .hljs-formula {
+      color: #6a737d;
+    }
+    .hljs-name,
+    .hljs-quote,
+    .hljs-selector-pseudo,
+    .hljs-selector-tag {
+      color: #22863a;
+    }
+    .hljs-subst {
+      color: #24292e;
+    }
+    .hljs-section {
+      color: #005cc5;
+      font-weight: 700;
+    }
+    .hljs-bullet {
+      color: #735c0f;
+    }
+    .hljs-emphasis {
+      color: #24292e;
+      font-style: italic;
+    }
+    .hljs-strong {
+      color: #24292e;
+      font-weight: 700;
+    }
+    .hljs-addition {
+      color: #22863a;
+      background-color: #f0fff4;
+    }
+    .hljs-deletion {
+      color: #b31d28;
+      background-color: #ffeef0;
+    }
+  }
+
+  /* Dark mode highlight.js theme override */
+  @media (prefers-color-scheme: dark) {
+    .hljs {
+      background: var(--color-neutral-800);
+      color: var(--color-neutral-100);
+      font-family: var(--font-mono);
+      font-size: 0.9em;
+      line-height: 1.5em;
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #8b949e !important;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-subst {
+      color: #ff7b72 !important;
+    }
+
+    .hljs-number,
+    .hljs-literal,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-tag .hljs-attr {
+      color: #79c0ff !important;
+    }
+
+    .hljs-string,
+    .hljs-doctag {
+      color: #a5d6ff !important;
+    }
+
+    .hljs-title,
+    .hljs-section,
+    .hljs-selector-id {
+      color: #d2a8ff !important;
+    }
+
+    .hljs-type,
+    .hljs-class .hljs-title,
+    .hljs-tag {
+      color: #ffa657 !important;
+    }
+
+    .hljs-regexp,
+    .hljs-link {
+      color: #7ee787 !important;
+    }
+
+    .hljs-meta {
+      color: #8b949e !important;
+    }
+
+    .hljs-built_in,
+    .hljs-builtin-name {
+      color: #ffa657 !important;
+    }
+
+    .hljs-attr,
+    .hljs-attribute {
+      color: #79c0ff !important;
+    }
+
+    .hljs-addition {
+      background-color: #238636 !important;
+      color: #aff5b4 !important;
+    }
+
+    .hljs-deletion {
+      background-color: #da3633 !important;
+      color: #ffdcd7 !important;
+    }
+  }
+
+  /* Fix scrolling issues */
+  .flex.h-full {
+    max-height: 100vh;
+  }
+
+  .flex-1.min-h-0 {
+    overflow-y: auto;
+  }
+
+  /* Ensure markdown content doesn't break layout */
+  [data-controller="markdown"] {
+    max-width: 100%;
+    overflow-wrap: break-word;
+  }
+
+  [data-controller="markdown"] pre {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+}

data/lib/generators/railsui/install/templates/themes/corgie/stylesheets/railsui/dropdown.css

@@ -0,0 +1,9 @@
+@layer components {
+  .dropdown-menu {
+    @apply absolute bg-white backdrop-blur-md rounded-2xl shadow-xl shadow-neutral-800/10 z-50 w-[320px] md:w-[220px] dark:bg-neutral-900/90 dark:backdrop-blur-sm dark:shadow-neutral-900/40 p-1 duration-200 outline-1 outline-neutral-300/80 dark:outline-neutral-600/90 font-tiktok;
+  }
+
+  .dropdown-item {
+    @apply py-2 px-3 text-neutral-800 text-[15px] hover:text-neutral-900 dark:text-neutral-100 flex items-center gap-2.5 hover:bg-neutral-50 dark:hover:bg-neutral-700/90 dark:hover:text-neutral-100 rounded-xl duration-200 transition-colors font-tiktok;
+  }
+}