ruby_cms 0.2.1.1 → 1.0.1

data/lib/generators/ruby_cms/templates/admin_page/edit.html.erb.tt

@@ -0,0 +1,14 @@
+<%%= AdminPage do %>
+  <%%= AdminPageHeader(
+    title: "<%= human_name %> bewerken",
+    breadcrumbs: [
+      { label: "Admin", url: admin_root_path },
+      { label: "<%= human_name.pluralize %>", url: admin_<%= plural_name %>_path },
+      { label: "Bewerken" }
+    ]
+  ) %>
+
+  <div class="p-4 sm:p-6">
+    <%%= render "form" %>
+  </div>
+<%% end %>

data/lib/generators/ruby_cms/templates/admin_page/index.html.erb.tt

@@ -1,11 +1,22 @@
-<%% content_for :title, "<%= human_name %>" %>
+<%%= AdminPage do %>
+  <%%= AdminPageHeader(
+    title: "<%= human_name.pluralize %>",
+    subtitle: "Beheer <%= human_name.downcase.pluralize %>",
+    breadcrumbs: [
+      { label: "Admin", url: admin_root_path },
+      { label: "<%= human_name.pluralize %>" }
+    ]
+  ) do %>
+<%- unless read_only? -%>
+    <%%= link_to new_admin_<%= singular_name %>_path,
+                class: "inline-flex items-center gap-1.5 h-8 px-3 rounded-md bg-blue-600 text-white text-[12.5px] font-medium hover:bg-blue-700 transition-colors no-underline" do %>
+      <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+      </svg>
+      Nieuwe <%= human_name.downcase %>
+    <%% end %>
+<%- end -%>
+  <%% end %>
 
-<div class="px-4 py-6 sm:px-6 lg:px-8">
-  <div class="sm:flex sm:items-center sm:justify-between">
-    <h1 class="text-2xl font-bold text-gray-900"><%= human_name %></h1>
-  </div>
-
-  <div class="mt-6">
-    <p class="text-gray-500">Start building your <%= human_name.downcase %> page here.</p>
-  </div>
-</div>
+  <%%= render "admin_table_content" %>
+<%% end %>

data/lib/generators/ruby_cms/templates/admin_page/new.html.erb.tt

@@ -0,0 +1,14 @@
+<%%= AdminPage do %>
+  <%%= AdminPageHeader(
+    title: "Nieuwe <%= human_name.downcase %>",
+    breadcrumbs: [
+      { label: "Admin", url: admin_root_path },
+      { label: "<%= human_name.pluralize %>", url: admin_<%= plural_name %>_path },
+      { label: "Nieuw" }
+    ]
+  ) %>
+
+  <div class="p-4 sm:p-6">
+    <%%= render "form" %>
+  </div>
+<%% end %>

data/lib/generators/ruby_cms/templates/assets/tailwind/application.css

@@ -0,0 +1,225 @@
+@import "tailwindcss";
+
+/* RubyCMS admin theme. Tailwind v4 entry — defines the design tokens the admin
+   components (ruby_ui / shadcn-style) rely on. Safe to edit / extend for your app. */
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: #f7f3eb;
+  --foreground: #111827;
+  --card: #ffffff;
+  --card-foreground: #111827;
+  --popover: #ffffff;
+  --popover-foreground: #111827;
+  --primary: #111111;
+  --primary-foreground: #ffffff;
+  --secondary: #8b5cf6;
+  --secondary-foreground: #ffffff;
+  --muted: #eee7da;
+  --muted-foreground: #4b5563;
+  --accent: #f1ebe1;
+  --accent-foreground: #111827;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --border: #e5dccd;
+  --input: #ffffff;
+  --ring: #8b5cf6;
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.98 0.01 285);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.95 0.01 285);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.89 0.01 285);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(87 100% 37%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(84 81% 44%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ruby_ui specific */
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+
+/* Container settings */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  max-width: 1400px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    background-image:
+      radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.04) 1px, transparent 0);
+    background-size: 12px 12px;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: "Montserrat", "Roboto", ui-sans-serif, system-ui, sans-serif;
+    letter-spacing: -0.01em;
+  }
+
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: "PT Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
+  }
+}
+
+/* Media library — small component helpers that cannot be expressed as pure utilities */
+@layer components {
+  /* Search input: focus-within ring (no Tailwind peer available on the wrapper form) */
+  .admin-search-field {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 32px;
+    border-radius: 8px;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    padding: 0 10px;
+    width: 280px;
+    max-width: 100%;
+  }
+  .admin-search-field:focus-within {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px #dbeafe;
+  }
+  .admin-search-field svg {
+    width: 14px;
+    height: 14px;
+    color: #94a3b8;
+    flex: 0 0 14px;
+  }
+  .admin-search-field input {
+    border: 0;
+    outline: 0;
+    background: transparent;
+    flex: 1;
+    font-size: 13px;
+    color: #0f172a;
+  }
+}
+
+/* Content-block inline formatting (visual editor output). Generic accent defaults —
+   override these to match your site's brand on public pages. */
+.cb-fg-cobalt { color: #2D5BFF; }
+.cb-fg-accent { color: #B14A2C; }
+.cb-fg-ok     { color: #4D6E2B; }
+.cb-fg-muted  { color: #6b7280; }
+.cb-size-lg   { font-size: 1.5em; }
+.cb-size-xl   { font-size: 2.4em; line-height: 1.1; }
+
+/* Sidebar collapse (icon-only mode) — toggled via .js-sidebar-toggle / admin--sidebar-collapse */
+aside[data-sidebar-collapsed="true"] { width: 3.25rem !important; max-width: 3.25rem !important; }
+aside[data-sidebar-collapsed="true"] [data-sidebar-collapse-hide] { display: none !important; }
+aside[data-sidebar-collapsed="true"] [data-sidebar-collapse-center] { justify-content: center !important; }
+aside[data-sidebar-collapsed="true"] nav { padding-left: 0.5rem; padding-right: 0.5rem; }

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Accordion < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_content.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__accordion_target: "content"
+        },
+        class: "overflow-y-hidden",
+        style: "height: 0px;"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_default_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultContent < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "pb-4 pt-0 text-sm"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_default_trigger.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionDefaultTrigger < Base
+    def view_template(&block)
+      div(class: "flex items-center justify-between w-full") do
+        p(&block)
+        RubyUI.AccordionIcon
+      end
+    end
+
+    def default_attrs
+      {
+        data: { action: "click->ruby-ui--accordion#toggle" },
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_icon.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionIcon < Base
+    def view_template(&block)
+      span(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        class: "opacity-50",
+        data: { ruby_ui__accordion_target: "icon" }
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_item.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionItem < Base
+    def initialize(open: false, rotate_icon: 180, **attrs)
+      @open = open
+      @rotate_icon = rotate_icon
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "ruby-ui--accordion",
+          ruby_ui__accordion_open_value: @open,
+          ruby_ui__accordion_rotate_icon_value: @rotate_icon
+        },
+        class: "border-b"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/accordion/accordion_trigger.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AccordionTrigger < Base
+    def view_template(&)
+      button(**attrs, &)
+    end
+
+    def default_attrs
+      {
+        type: "button",
+        data: { action: "click->ruby-ui--accordion#toggle" },
+        class: "w-full flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/admin_page/admin_page.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AdminPage < Base
+    def initialize(turbo_frame: nil, turbo_frame_options: {}, full_height: false, **user_attrs)
+      @turbo_frame = turbo_frame
+      @turbo_frame_options = turbo_frame_options
+      @full_height = full_height
+      super(**user_attrs)
+    end
+
+    def view_template(&)
+      if @turbo_frame
+        frame_opts = { class: "flex-1 flex flex-col min-h-0", data: { turbo_action: "advance" } }.merge(@turbo_frame_options)
+        turbo_frame_tag(@turbo_frame, **frame_opts) do
+          div(**attrs) { yield if block_given? }
+        end
+      else
+        div(**attrs, &)
+      end
+    end
+
+    private
+
+    def default_attrs
+      base = "bg-white rounded-[14px] shadow-[0_1px_2px_rgba(28,25,23,0.04)] ring-1 ring-[#e9e4d4] flex flex-col min-w-0"
+      base += " flex-1 min-h-0 h-[calc(100vh-2rem)] lg:h-[calc(100vh-1.5rem)] overflow-hidden" if @full_height
+      { class: base }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/admin_page/admin_page_header.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AdminPageHeader < Base
+    def initialize(title:, subtitle: nil, breadcrumbs: [], actions_left: false, **user_attrs)
+      @title = title
+      @subtitle = subtitle
+      @breadcrumbs = Array(breadcrumbs)
+      @actions_left = actions_left
+      super(**user_attrs)
+    end
+
+    def view_template(&block)
+      div(class: "flex items-center justify-between gap-2 sm:gap-3 px-3 sm:px-4 py-2.5 border-b border-[#e9e4d4] flex-wrap min-h-12") do
+        div(class: "min-w-0 flex-1 flex items-center gap-2 sm:gap-2.5 flex-nowrap") do
+          render_sidebar_toggle
+          div(class: "min-w-0 flex items-baseline gap-2.5 flex-nowrap overflow-hidden") do
+            render_breadcrumbs if @breadcrumbs.any?
+            h1(class: "text-[14px] font-semibold tracking-[-0.005em] text-[#1c1917] m-0 truncate leading-snug min-w-0") { @title } if @title.present?
+            p(class: "hidden sm:block text-[12px] text-[#78716c] m-0 whitespace-nowrap overflow-hidden text-ellipsis min-w-0") { @subtitle } if @subtitle
+          end
+          # Left-aligned actions (e.g. visual editor controls) sit next to the breadcrumb.
+          div(class: "flex items-center gap-1.5 flex-shrink-0", &block) if @actions_left && block
+        end
+        div(class: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0 flex-wrap justify-end") do
+          if block && !@actions_left
+            div(class: "flex items-center gap-1.5 flex-wrap justify-end", &block)
+          end
+          raw view_context.render(partial: "layouts/admin/topbar_widgets")
+        end
+      end
+    end
+
+    private
+
+    def render_sidebar_toggle
+      button(
+        type: "button",
+        class: "js-sidebar-toggle hidden lg:inline-flex items-center justify-center w-7 h-7 -ml-1 rounded-md text-[#78716c] hover:bg-black/5 hover:text-[#1c1917] transition-colors cursor-pointer flex-shrink-0",
+        aria_label: "Toggle sidebar"
+      ) do
+        svg(class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24") do |s|
+          s.rect(x: "3", y: "4", width: "18", height: "16", rx: "2", "stroke-width": "1.75")
+          s.path(d: "M9 4v16", "stroke-width": "1.75")
+        end
+      end
+    end
+
+    def render_breadcrumbs
+      nav(class: "hidden md:flex items-center gap-1.5 text-[#78716c] text-[12px] m-0 whitespace-nowrap flex-shrink-0 after:content-['·'] after:text-[#a8a29e] after:ml-1.5", aria_label: "Breadcrumb") do
+        @breadcrumbs.each_with_index do |crumb, idx|
+          span(class: "text-[#a8a29e] select-none") { "/" } if idx > 0
+          label = crumb[:label] || crumb[:text]
+          if idx == @breadcrumbs.size - 1
+            span(class: "text-[#1c1917] font-medium") { label }
+          elsif (url = crumb[:url] || crumb[:path])
+            a(href: url, class: "text-[#78716c] no-underline hover:text-[#1c1917] transition-colors") { label }
+          else
+            span { label }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/admin_page/admin_resource_card.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AdminResourceCard < Base
+    CARD_CLASS = "bg-white shadow-sm rounded-xl border border-[#e9e4d4] overflow-hidden"
+    GRID_CLASS = "grid grid-cols-1 lg:grid-cols-3"
+    MAIN_CLASS = "lg:col-span-2 space-y-5 p-4 sm:p-6"
+    SIDEBAR_CLASS = "border-t lg:border-t-0 lg:border-l border-[#e9e4d4] bg-white space-y-5 p-4 sm:p-6"
+    ACTIONS_CLASS = "flex flex-col gap-2 border-t border-[#e9e4d4] bg-white px-4 py-4 sm:flex-row sm:items-center sm:justify-end sm:gap-2 sm:px-6"
+
+    INPUT_CLASS = "block w-full rounded-md border border-[#e9e4d4] bg-white px-3 py-2 text-[13.5px] text-[#1c1917] shadow-sm placeholder:text-[#a8a29e] focus:outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 transition-colors"
+    LABEL_CLASS = "block text-[13px] font-medium text-[#1c1917] mb-1.5"
+    HINT_CLASS = "mt-1 text-[11.5px] text-[#78716c]"
+    FILE_INPUT_CLASS = "block w-full text-[13px] text-[#78716c] file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 transition-colors"
+
+    SECTION_CLASS = "rounded-xl border border-[#e9e4d4] bg-[#faf8f3] p-5"
+    SECTION_TITLE_CLASS = "text-[10.5px] font-semibold text-[#78716c] uppercase tracking-[0.12em] mb-3"
+    DETAIL_LABEL_CLASS = "text-[10.5px] font-medium text-[#78716c] uppercase tracking-[0.12em]"
+    DETAIL_VALUE_CLASS = "mt-1 text-[13px] text-[#1c1917]"
+
+    CANCEL_CLASS = "inline-flex items-center h-9 px-4 rounded-md bg-white border border-[#e9e4d4] text-[#1c1917] text-[12.5px] font-medium hover:bg-[#faf8f3] transition-colors no-underline"
+    SUBMIT_CLASS = "inline-flex items-center h-9 px-4 rounded-md bg-blue-600 text-white text-[12.5px] font-medium hover:bg-blue-700 transition-colors cursor-pointer border-0"
+
+    def view_template(&)
+      div(class: CARD_CLASS, &)
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/admin_page/admin_table_content.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AdminTableContent < Base
+    def initialize(id: "admin_table_content", **user_attrs)
+      @id = id
+      super(**user_attrs)
+    end
+
+    def view_template(&)
+      turbo_frame_tag(@id, **attrs) { yield if block_given? }
+    end
+
+    private
+
+    def default_attrs
+      { class: "flex-1 flex flex-col min-h-0", data: { turbo_action: "advance" } }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/alert/alert.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Alert < Base
+    def initialize(variant: nil, **attrs)
+      @variant = variant
+      super(**attrs) # must be called after variant is set
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def colors
+      case @variant
+      when nil
+        "ring-border bg-muted/20 text-foreground [&>svg]:opacity-80"
+      when :warning
+        "ring-warning/20 bg-warning/5 text-warning [&>svg]:text-warning/80"
+      when :success
+        "ring-success/20 bg-success/5 text-success [&>svg]:text-success/80"
+      when :destructive
+        "ring-destructive/20 bg-destructive/5 text-destructive [&>svg]:text-destructive/80"
+      end
+    end
+
+    def default_attrs
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg~*]:ps-8"
+      {
+        class: [ base_classes, colors ]
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/alert/alert_description.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertDescription < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "text-sm [&_p]:leading-relaxed"
+      }
+    end
+  end
+end

data/lib/generators/ruby_cms/templates/components/ruby_ui/alert/alert_title.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class AlertTitle < Base
+    def view_template(&)
+      h5(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "mb-1 font-medium leading-none tracking-tight"
+      }
+    end
+  end
+end