panda-core 0.12.2 → 1.1.0

data/app/components/panda/core/admin/dropdown_button_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # A button-styled dropdown menu. Combines ButtonComponent styling with
+      # DropdownComponent behaviour (Stimulus `dropdown` controller).
+      #
+      # @example In a heading slot
+      #   heading.with_dropdown_button(text: "View Board") do |db|
+      #     db.with_item(label: "Fundraising", href: "/boards/1")
+      #     db.with_item(label: "Events",      href: "/boards/2")
+      #   end
+      #
+      class DropdownButtonComponent < Panda::Core::Base
+        renders_many :items, "ItemComponent"
+
+        def initialize(text: "Options", action: :secondary, icon: nil, size: :regular, **attrs)
+          @text = text
+          @action = action
+          @icon = icon
+          @size = size
+          super(**attrs)
+          yield self if block_given?
+        end
+
+        attr_reader :text, :action, :icon, :size
+
+        class ItemComponent < Panda::Core::Base
+          def initialize(label:, href: "#", method: nil, **attrs)
+            @label = label
+            @href = href
+            @method = method
+            super(**attrs)
+          end
+
+          attr_reader :label, :href, :method
+
+          def call
+            options = {
+              class: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 hover:text-gray-900",
+              role: "menuitem",
+              data: {dropdown_target: "menuItem"}
+            }
+            options[:data][:turbo_method] = method if method
+
+            content_tag(:a, label, **options.merge(href: href))
+          end
+        end
+
+        private
+
+        def default_attrs
+          {class: "relative inline-block text-left"}
+        end
+
+        def button_classes
+          base = "inline-flex items-center rounded-xl font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer transition-colors "
+          base + size_classes + action_classes
+        end
+
+        def size_classes
+          case @size
+          when :small, :sm
+            "gap-x-1.5 px-3 py-1.5 text-xs "
+          when :medium, :regular, :md
+            "gap-x-2 px-4 py-2 text-sm "
+          when :large, :lg
+            "gap-x-2 px-5 py-2.5 text-base "
+          else
+            "gap-x-2 px-4 py-2 text-sm "
+          end
+        end
+
+        def action_classes
+          case @action
+          when :save, :create, :add, :new
+            "text-white bg-primary-500 hover:bg-primary-600 focus-visible:outline-primary-600"
+          when :save_inactive
+            "text-white bg-gray-300 cursor-not-allowed"
+          when :secondary
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
+          when :delete, :destroy, :danger
+            "text-error-600 border border-error-200 bg-error-50 hover:bg-error-100 focus-visible:outline-error-300"
+          else
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
+          end
+        end
+
+        def render_text
+          parts = []
+          parts << content_tag(:i, "", class: "fa-solid fa-#{@icon}") if @icon
+          parts << @text.titleize
+          parts << content_tag(:i, "", class: "fa-solid fa-chevron-down text-xs", aria: {hidden: "true"})
+          safe_join(parts)
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/dropdown_component.html.erb

@@ -0,0 +1,32 @@
+<div <%= tag.attributes(**attrs) %>
+     data-controller="dropdown"
+     data-action="click@window->dropdown#hide keydown.escape@window->dropdown#hide">
+  <button type="button"
+          data-action="click->dropdown#toggle"
+          data-dropdown-target="button"
+          class="inline-flex items-center gap-1 text-gray-500 hover:text-gray-700 focus:outline-none"
+          aria-haspopup="true">
+    <% if trigger_slot? %>
+      <%= trigger_slot %>
+    <% else %>
+      <%= chevron_icon %>
+    <% end %>
+  </button>
+
+  <div data-dropdown-target="menu"
+       class="hidden absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-lg bg-white shadow-sm border border-gray-200 focus:outline-none"
+       data-transition-enter="transition ease-out duration-100"
+       data-transition-enter-from="transform opacity-0 scale-95"
+       data-transition-enter-to="transform opacity-100 scale-100"
+       data-transition-leave="transition ease-in duration-75"
+       data-transition-leave-from="transform opacity-100 scale-100"
+       data-transition-leave-to="transform opacity-0 scale-95"
+       role="menu"
+       aria-orientation="vertical">
+    <div class="py-1" role="none">
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/components/panda/core/admin/dropdown_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Reusable dropdown menu component with a chevron trigger.
+      #
+      # Uses the pre-registered `dropdown` Stimulus controller from
+      # tailwindcss-stimulus-components for toggle, outside-click close,
+      # Escape key close, and CSS transitions.
+      #
+      # @example Basic dropdown
+      #   <%= render Panda::Core::Admin::DropdownComponent.new do |dropdown| %>
+      #     <% dropdown.with_item(label: "Edit", href: edit_path) %>
+      #     <% dropdown.with_item(label: "Delete", href: delete_path, method: :delete) %>
+      #   <% end %>
+      #
+      # @example With custom trigger content
+      #   <%= render Panda::Core::Admin::DropdownComponent.new do |dropdown| %>
+      #     <% dropdown.with_trigger_slot do %>
+      #       <span class="text-xs text-gray-500">Last 30 days</span>
+      #       <i class="fa-solid fa-chevron-down text-xs"></i>
+      #     <% end %>
+      #     <% dropdown.with_item(label: "Last 7 days", href: "?period=7d") %>
+      #   <% end %>
+      #
+      class DropdownComponent < Panda::Core::Base
+        renders_one :trigger_slot
+        renders_many :items, "ItemComponent"
+
+        class ItemComponent < Panda::Core::Base
+          def initialize(label:, href: "#", method: nil, **attrs)
+            @label = label
+            @href = href
+            @method = method
+            super(**attrs)
+          end
+
+          attr_reader :label, :href, :method
+
+          def call
+            options = {
+              class: "block w-full text-left px-4 py-2 text-xs text-gray-500 hover:bg-gray-50 hover:text-gray-700",
+              role: "menuitem",
+              data: {dropdown_target: "menuItem"}
+            }
+            options[:data][:turbo_method] = method if method
+
+            content_tag(:a, label, **options.merge(href: href))
+          end
+        end
+
+        private
+
+        def default_attrs
+          {class: "relative inline-block text-left"}
+        end
+
+        def chevron_icon
+          content_tag(:i, nil, class: "fa-solid fa-chevron-down text-xs", aria: {hidden: "true"})
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/empty_state_component.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag :div, **attrs do %>
+  <% if icon.present? %>
+    <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-gray-100 text-gray-400">
+      <i class="<%= icon %>"></i>
+    </div>
+  <% end %>
+  <h3 class="text-lg font-semibold text-gray-900"><%= title %></h3>
+  <% if description.present? %>
+    <p class="mt-2 text-sm text-gray-500"><%= description %></p>
+  <% end %>
+  <% if content? %>
+    <div class="mt-4 flex justify-center">
+      <%= content %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/panda/core/admin/empty_state_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Empty state component for tables and lists.
+      class EmptyStateComponent < Panda::Core::Base
+        def initialize(title:, description: nil, icon: nil, **attrs)
+          @title = title
+          @description = description
+          @icon = icon
+          super(**attrs)
+        end
+
+        attr_reader :title, :description, :icon
+
+        def default_attrs
+          {
+            class: "border-2 border-dashed border-gray-200 bg-white rounded-2xl px-6 py-10 text-center"
+          }
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/file_gallery_component.html.erb

@@ -0,0 +1,58 @@
+<% if @files.any? %>
+  <%# Gallery %>
+  <section>
+    <h2 id="gallery-heading" class="sr-only">Files</h2>
+    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+      <% @files.each do |file| %>
+        <% is_selected = @selected_file && @selected_file.id == file.id %>
+        <li class="relative cursor-pointer">
+          <div class="<%= file_container_classes(is_selected) %> aspect-square">
+            <% if file.image? %>
+              <%= tag.img src: url_for(file),
+                  alt: file.filename.to_s,
+                  class: file_image_classes(is_selected),
+                  onerror: "this.onerror=null;this.style.display='none';this.nextElementSibling.classList.remove('hidden')" %>
+              <div class="hidden flex items-center justify-center h-full bg-gray-100 dark:bg-gray-700" role="img" aria-label="Image preview not available">
+                <i class="fa-solid fa-file-image text-4xl text-gray-400"></i>
+              </div>
+            <% else %>
+              <%# File icon placeholder - implement based on file type %>
+              <div class="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-700">
+                <i class="fa-solid fa-file text-4xl text-gray-400"></i>
+              </div>
+            <% end %>
+
+            <%= content_tag :button,
+                type: "button",
+                class: "absolute inset-0 focus:outline-hidden",
+                data: {
+                  action: "click->file-gallery#selectFile",
+                  file_id: file.id,
+                  file_url: url_for(file),
+                  file_name: file.filename.to_s,
+                  file_size: file.byte_size,
+                  file_type: file.content_type,
+                  file_created: file.created_at.to_s
+                } do %>
+              <span class="sr-only">View details for <%= file.filename %></span>
+            <% end %>
+          </div>
+
+          <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white">
+            <%= file.filename.to_s %>
+          </p>
+          <p class="pointer-events-none block text-sm font-medium text-gray-500 dark:text-gray-400">
+            <%= file_metadata(file) %>
+          </p>
+        </li>
+      <% end %>
+    </ul>
+  </section>
+<% else %>
+  <%# Empty state %>
+  <div class="text-center py-12">
+    <i class="fa-solid fa-images text-6xl text-gray-400 mb-4"></i>
+    <h3 class="text-lg font-medium text-gray-900 dark:text-white">No files</h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400">Upload files to see them here.</p>
+  </div>
+<% end %>

data/app/components/panda/core/admin/file_gallery_component.rb

@@ -4,75 +4,24 @@ module Panda
   module Core
     module Admin
       class FileGalleryComponent < Panda::Core::Base
-        prop :files, _Nilable(Object), default: -> { [] }
-        prop :selected_file, _Nilable(Object), default: nil
-
-        def view_template
-          if @files.any?
-            render_gallery
-          else
-            render_empty_state
-          end
+        def initialize(selected_file: nil, files: [], blob_categories: {}, **attrs)
+          @files = files
+          @selected_file = selected_file
+          @blob_categories = blob_categories
+          super(**attrs)
         end
 
+        attr_reader :files, :selected_file, :blob_categories
+
         private
 
         def render_gallery
-          section do
-            h2(id: "gallery-heading", class: "sr-only") { "Files" }
-            ul(
-              role: "list",
-              class: "grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"
-            ) do
-              @files.each do |file|
-                render_file_item(file)
-              end
-            end
-          end
+          # Implemented in ERB template
         end
 
         def render_file_item(file)
-          is_selected = @selected_file && @selected_file.id == file.id
-
-          li(class: "relative") do
-            div(
-              class: file_container_classes(is_selected),
-              style: "cursor: pointer;"
-            ) do
-              if file.image?
-                img(
-                  src: url_for(file),
-                  alt: file.filename.to_s,
-                  class: file_image_classes(is_selected)
-                )
-              else
-                render_file_icon(file)
-              end
-
-              button(
-                type: "button",
-                class: "absolute inset-0 focus:outline-hidden",
-                data: {
-                  action: "click->file-gallery#selectFile",
-                  file_id: file.id,
-                  file_url: url_for(file),
-                  file_name: file.filename.to_s,
-                  file_size: file.byte_size,
-                  file_type: file.content_type,
-                  file_created: file.created_at.to_s
-                }
-              ) do
-                span(class: "sr-only") { "View details for #{file.filename}" }
-              end
-            end
-
-            p(class: "pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900 dark:text-white") do
-              plain file.filename.to_s
-            end
-            p(class: "pointer-events-none block text-sm font-medium text-gray-500 dark:text-gray-400") do
-              plain number_to_human_size(file.byte_size)
-            end
-          end
+          @selected_file && @selected_file.id == file.id
+          # Implemented in ERB template
         end
 
         def file_container_classes(selected)
@@ -80,56 +29,33 @@ module Panda
           focus = if selected
             "outline-2 outline-offset-2 outline-panda-dark dark:outline-panda-light outline"
           else
-            "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 dark:focus-within:outline-indigo-500"
+            "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary-600 dark:focus-within:outline-primary-500"
           end
           "#{base} #{focus}"
         end
 
         def file_image_classes(selected)
-          base = "pointer-events-none aspect-10/7 rounded-lg object-cover outline -outline-offset-1 outline-black/5 dark:outline-white/10"
+          base = "pointer-events-none aspect-square object-contain p-1 outline -outline-offset-1 outline-black/5 dark:outline-white/10"
           hover = selected ? "" : "group-hover:opacity-75"
           "#{base} #{hover}"
         end
 
         def render_file_icon(file)
-          div(class: "flex items-center justify-center h-full") do
-            div(class: "text-center") do
-              svg(
-                class: "mx-auto h-12 w-12 text-gray-400",
-                fill: "none",
-                viewBox: "0 0 24 24",
-                stroke: "currentColor",
-                aria: {hidden: "true"}
-              ) do
-                path(
-                  stroke_linecap: "round",
-                  stroke_linejoin: "round",
-                  d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
-                )
-              end
-              p(class: "mt-1 text-xs text-gray-500 uppercase") { file.content_type&.split("/")&.last || "file" }
-            end
-          end
+          # Implemented in ERB template
         end
 
         def render_empty_state
-          div(class: "text-center py-12 border border-dashed rounded-lg") do
-            svg(
-              class: "mx-auto h-12 w-12 text-gray-400",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              aria: {hidden: "true"}
-            ) do
-              path(
-                stroke_linecap: "round",
-                stroke_linejoin: "round",
-                d: "M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
-              )
-            end
-            h3(class: "mt-2 text-sm font-semibold text-gray-900") { "No files" }
-            p(class: "mt-1 text-sm text-gray-500") { "Get started by uploading a file." }
-          end
+          # Implemented in ERB template
+        end
+
+        # Build the metadata subtitle for a file in the gallery grid
+        def file_metadata(file)
+          parts = []
+          variant_count = file.variant_records.size
+          parts << "#{variant_count} #{"variant".pluralize(variant_count)}" if variant_count > 0
+          category = @blob_categories[file.id]
+          parts << category.name if category
+          parts.any? ? parts.join(" \u00B7 ") : number_to_human_size(file.byte_size)
         end
 
         # Helper method to generate URL for ActiveStorage attachment
@@ -139,6 +65,8 @@ module Panda
           else
             "#"
           end
+        rescue
+          "#"
         end
 
         # Helper method for human-readable file sizes

data/app/components/panda/core/admin/filter_pills_component.html.erb

@@ -0,0 +1,6 @@
+<div class="flex flex-wrap gap-2 mb-4">
+  <%= link_to @all_label, @url_helper.call(nil), class: pill_classes(@active_value.blank?) %>
+  <% @items.each do |item| %>
+    <%= link_to item[:label], @url_helper.call(item[:value]), class: pill_classes(@active_value == item[:value]) %>
+  <% end %>
+</div>

data/app/components/panda/core/admin/filter_pills_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class FilterPillsComponent < Panda::Core::Base
+        def initialize(items:, url_helper:, param_name: :category, active_value: nil, all_label: "All", **attrs)
+          @items = items
+          @url_helper = url_helper
+          @param_name = param_name
+          @active_value = active_value
+          @all_label = all_label
+          super(**attrs)
+        end
+
+        attr_reader :items, :url_helper, :param_name, :active_value, :all_label
+
+        def pill_classes(active)
+          base = "inline-flex items-center rounded-full px-3 py-1.5 text-xs font-medium"
+          if active
+            "#{base} bg-primary-100 text-primary-700"
+          else
+            "#{base} bg-gray-100 text-gray-700 hover:bg-gray-200"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/flash_message_component.html.erb

@@ -0,0 +1,11 @@
+<div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50">
+  <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+    <%= content_tag :div, notification_attrs do %>
+      <div class="flex items-center">
+        <%= render_icon %>
+        <%= render_content %>
+        <%= render_close_button %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/components/panda/core/admin/flash_message_component.rb

@@ -4,37 +4,19 @@ module Panda
   module Core
     module Admin
       class FlashMessageComponent < Panda::Core::Base
-        prop :message, String
-        prop :kind, Symbol
-        prop :temporary, _Boolean, default: true
-        prop :subtitle, _Nilable(String), default: -> {}
-
-        def view_template
-          # Global notification container (fixed position)
-          div(
-            aria: {live: "assertive"},
-            class: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50"
-          ) do
-            div(class: "flex w-full flex-col items-center space-y-4 sm:items-end") do
-              # Notification panel with Tailwind Plus styling
-              div(**notification_attrs) do
-                div(class: "p-4") do
-                  div(class: "flex items-start") do
-                    render_icon
-                    render_content
-                    render_close_button
-                  end
-                end
-              end
-            end
-          end
+        def initialize(message: "", kind: :default, temporary: true, subtitle: nil, **attrs)
+          @message = message
+          @kind = kind
+          @temporary = temporary
+          @subtitle = subtitle
+          super(**attrs)
         end
 
-        private
+        attr_reader :message, :kind, :temporary, :subtitle
 
         def notification_attrs
           {
-            class: "pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg transition duration-300 ease-out sm:translate-x-0 dark:bg-gray-800 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0 #{border_color_css}",
+            class: "pointer-events-auto w-full max-w-md translate-y-0 transform rounded-2xl border px-4 py-3 shadow-lg transition duration-300 ease-out sm:translate-x-0 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0 #{tone_classes}",
             data: {
               controller: "alert",
               alert_dismiss_after_value: (@temporary ? "5000" : nil)
@@ -43,39 +25,30 @@ module Panda
         end
 
         def render_icon
-          div(class: "shrink-0") do
-            i(class: "fa-solid size-6 #{icon_css} #{icon_colour_css}")
+          content_tag(:div, class: "shrink-0") do
+            content_tag(:i, "", class: "fa-solid size-5 #{icon_css} #{icon_colour_css}")
           end
         end
 
         def render_content
-          div(class: "ml-3 w-0 flex-1 pt-0.5") do
-            p(class: "text-sm font-medium text-gray-900 dark:text-white flash-message-title") { @message }
-            if @subtitle
-              p(class: "mt-1 text-sm text-gray-500 dark:text-gray-400 flash-message-subtitle") { @subtitle }
+          content_tag(:div, class: "ml-2 w-0 flex-1") do
+            message_html = content_tag(:p, @message, class: "text-sm font-medium flash-message-title")
+            subtitle_html = if @subtitle
+              content_tag(:p, @subtitle, class: "mt-1 text-xs opacity-80 flash-message-subtitle")
+            else
+              "".html_safe
             end
+            (message_html + subtitle_html).html_safe
           end
         end
 
         def render_close_button
-          div(class: "ml-4 flex shrink-0") do
-            button(
+          content_tag(:div, class: "ml-4 flex shrink-0") do
+            content_tag(:button,
               type: "button",
-              class: "inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 dark:hover:text-white dark:focus:outline-blue-500",
-              data: {action: "alert#close"}
-            ) do
-              span(class: "sr-only") { "Close" }
-              svg(
-                viewBox: "0 0 20 20",
-                fill: "currentColor",
-                data: {slot: "icon"},
-                aria: {hidden: "true"},
-                class: "size-5"
-              ) do |s|
-                s.path(
-                  d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
-                )
-              end
+              class: "inline-flex items-center cursor-pointer opacity-60 hover:opacity-100",
+              data: {action: "alert#close"}) do
+              content_tag(:i, "", class: "fa-solid fa-xmark")
             end
           end
         end
@@ -83,30 +56,30 @@ module Panda
         def icon_colour_css
           case @kind
           when :success
-            "text-green-400 dark:text-green-500"
+            "text-emerald-600"
           when :alert, :error
-            "text-red-400 dark:text-red-500"
+            "text-rose-600"
           when :warning
-            "text-yellow-400 dark:text-yellow-500"
+            "text-amber-600"
           when :info, :notice
-            "text-blue-400 dark:text-blue-500"
+            "text-sky-600"
           else
-            "text-gray-400 dark:text-gray-500"
+            "text-gray-500"
           end
         end
 
-        def border_color_css
+        def tone_classes
           case @kind
           when :success
-            "ring-2 ring-green-400/20 dark:ring-green-500/30"
+            "bg-emerald-50 text-emerald-700 border-emerald-200"
           when :alert, :error
-            "ring-2 ring-red-400/20 dark:ring-red-500/30"
+            "bg-rose-50 text-rose-700 border-rose-200"
           when :warning
-            "ring-2 ring-yellow-400/20 dark:ring-yellow-500/30"
+            "bg-amber-50 text-amber-700 border-amber-200"
           when :info, :notice
-            "ring-2 ring-blue-400/20 dark:ring-blue-500/30"
+            "bg-sky-50 text-sky-700 border-sky-200"
           else
-            "ring-1 ring-gray-400/10 dark:ring-gray-500/20"
+            "bg-white text-gray-700 border-gray-200"
           end
         end
 

data/app/components/panda/core/admin/form_error_component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag :div, **attrs do %>
+  <%= content_tag :div, class: "text-sm text-red-600" do %>
+    <% error_messages.each do |message| %>
+      <p><%= message %></p>
+    <% end %>
+  <% end %>
+<% end %>