panda-core 0.12.5 → 1.1.0

data/app/components/panda/core/UI/badge.rb

@@ -27,45 +27,29 @@ module Panda
       #   )
       #
       class Badge < Panda::Core::Base
-        prop :text, String
-        prop :variant, Symbol, default: :default
-        prop :size, Symbol, default: :medium
-        prop :removable, _Boolean, default: false
-        prop :rounded, _Boolean, default: false
+        def initialize(text:, variant: :default, size: :medium, removable: false, rounded: false, **attrs)
+          @text = text
+          @variant = variant
+          @size = size
+          @removable = removable
+          @rounded = rounded
+          super(**attrs)
+        end
 
-        def view_template
-          span(**@attrs) do
-            plain text
-            if removable
-              whitespace
-              button(
-                type: "button",
-                class: "inline-flex items-center ml-1 hover:opacity-70",
-                aria: {label: "Remove"}
-              ) do
-                svg(
-                  class: "h-3 w-3",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  viewBox: "0 0 20 20",
-                  fill: "currentColor"
-                ) do |s|
-                  s.path(
-                    d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-                  )
-                end
-              end
-            end
-          end
+        attr_reader :text, :variant, :size, :removable, :rounded
+
+        def removable?
+          removable
         end
 
+        private
+
         def default_attrs
           {
             class: badge_classes
           }
         end
 
-        private
-
         def badge_classes
           base = "inline-flex items-center font-medium"
           base += " #{size_classes}"

data/app/components/panda/core/UI/button.html.erb

@@ -0,0 +1,5 @@
+<% if @href %>
+  <%= content_tag :a, @text, @attrs %>
+<% else %>
+  <%= content_tag :button, @text, @attrs %>
+<% end %>

data/app/components/panda/core/UI/button.rb

@@ -3,7 +3,7 @@
 module Panda
   module Core
     module UI
-      # Modern Phlex-based button component with type-safe props.
+      # Modern ViewComponent-based button component with type-safe props.
       #
       # Supports both <button> and <a> elements based on whether an href is provided.
       # Follows Tailwind UI Plus styling patterns with dark mode support.
@@ -34,22 +34,18 @@ module Panda
       #   )
       #
       class Button < Panda::Core::Base
-        # Type-safe properties using Literal
-        prop :text, String
-        prop :variant, Symbol, default: :default
-        prop :size, Symbol, default: :medium
-        prop :disabled, _Boolean, default: false
-        prop :type, String, default: "button"
-        prop :href, _Nilable(String), default: -> {}
-
-        def view_template
-          if @href
-            a(**@attrs) { @text }
-          else
-            button(**@attrs) { @text }
-          end
+        def initialize(text: "", variant: :default, size: :medium, disabled: false, type: "button", href: nil, **attrs)
+          @text = text
+          @variant = variant
+          @size = size
+          @disabled = disabled
+          @type = type
+          @href = href
+          super(**attrs)
         end
 
+        attr_reader :text, :variant, :size, :disabled, :type, :href
+
         def default_attrs
           base = {
             class: button_classes

data/app/components/panda/core/UI/card.html.erb

@@ -0,0 +1,3 @@
+<%= content_tag :div, @attrs do %>
+  <%= content %>
+<% end %>

data/app/components/panda/core/UI/card.rb

@@ -29,14 +29,15 @@ module Panda
       #   end
       #
       class Card < Panda::Core::Base
-        prop :padding, Symbol, default: :medium
-        prop :elevation, Symbol, default: :low
-        prop :border, _Boolean, default: true
-
-        def view_template(&block)
-          div(**@attrs, &block)
+        def initialize(padding: :medium, elevation: :low, border: true, **attrs)
+          @padding = padding
+          @elevation = elevation
+          @border = border
+          super(**attrs)
         end
 
+        attr_reader :padding, :elevation, :border
+
         def default_attrs
           {
             class: card_classes

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

@@ -0,0 +1,21 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot do %>
+    <%= heading %>
+    <span class="text-sm font-normal text-gray-500 dark:text-gray-400 ml-1">(<%= changes.size %> changed)</span>
+  <% end %>
+  <% panel.with_body_slot do %>
+    <div class="divide-y divide-gray-200 dark:divide-gray-700 -mx-4 -mb-4">
+      <% changes.each do |attr, values| %>
+        <div class="p-4 grid grid-cols-3 gap-4">
+          <div class="text-sm font-medium text-gray-500 dark:text-gray-400"><%= attr.humanize %></div>
+          <div class="text-sm">
+            <span class="px-1 bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 line-through"><%= display_value(values[:old]) %></span>
+          </div>
+          <div class="text-sm">
+            <span class="px-1 bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200"><%= display_value(values[:new]) %></span>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class AttributeDiffComponent < Panda::Core::Base
+        def initialize(changes:, heading: "Attribute Changes", **attrs)
+          @changes = changes
+          @heading = heading
+          super(**attrs)
+        end
+
+        attr_reader :changes, :heading
+
+        def render?
+          changes.any?
+        end
+
+        def display_value(value)
+          if value.is_a?(FalseClass) || value.is_a?(TrueClass)
+            value.to_s
+          else
+            value.presence || "(empty)"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,36 @@
+<div>
+  <%# Mobile back link %>
+  <% if @show_back && @items.any? %>
+    <nav aria-label="Back" class="sm:hidden">
+      <%= content_tag :a, href: back_link_href, class: "flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" do %>
+        <%= render_chevron_left_icon %>
+        Back
+      <% end %>
+    </nav>
+  <% end %>
+
+  <%# Desktop breadcrumb trail %>
+  <nav aria-label="Breadcrumb" class="hidden sm:flex">
+    <ol role="list" class="flex items-center space-x-4">
+      <% @items.each_with_index do |item, index| %>
+        <li>
+          <% if index.zero? %>
+            <%# First item (no separator) %>
+            <div class="flex">
+              <%= content_tag :a, item[:text], href: item[:href], class: breadcrumb_link_classes(index) %>
+            </div>
+          <% else %>
+            <%# Subsequent items (with separator) %>
+            <div class="flex items-center">
+              <%= render_chevron_right_icon %>
+              <%= content_tag :a, item[:text],
+                  href: item[:href],
+                  aria: ((index == @items.length - 1) ? {current: "page"} : nil),
+                  class: breadcrumb_link_classes(index) %>
+            </div>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </nav>
+</div>

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

@@ -26,64 +26,14 @@ module Panda
       #   )
       #
       class BreadcrumbComponent < Panda::Core::Base
-        prop :items, Array, default: -> { [] }
-        prop :show_back, _Boolean, default: true
-
-        def view_template
-          div do
-            # Mobile back link
-            if @show_back && @items.any?
-              nav(
-                aria: {label: "Back"},
-                class: "sm:hidden"
-              ) do
-                a(
-                  href: back_link_href,
-                  class: "flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-                ) do
-                  render_chevron_left_icon
-                  plain "Back"
-                end
-              end
-            end
-
-            # Desktop breadcrumb trail
-            nav(
-              aria: {label: "Breadcrumb"},
-              class: "hidden sm:flex"
-            ) do
-              ol(
-                role: "list",
-                class: "flex items-center space-x-4"
-              ) do
-                @items.each_with_index do |item, index|
-                  li do
-                    if index.zero?
-                      # First item (no separator)
-                      div(class: "flex") do
-                        a(
-                          href: item[:href],
-                          class: breadcrumb_link_classes(index)
-                        ) { item[:text] }
-                      end
-                    else
-                      # Subsequent items (with separator)
-                      div(class: "flex items-center") do
-                        render_chevron_right_icon
-                        a(
-                          href: item[:href],
-                          aria: ((index == @items.length - 1) ? {current: "page"} : nil),
-                          class: breadcrumb_link_classes(index)
-                        ) { item[:text] }
-                      end
-                    end
-                  end
-                end
-              end
-            end
-          end
+        def initialize(items: [], show_back: true, **attrs)
+          @items = items
+          @show_back = show_back
+          super(**attrs)
         end
 
+        attr_reader :items, :show_back
+
         private
 
         def back_link_href
@@ -97,14 +47,13 @@ module Panda
         end
 
         def render_chevron_left_icon
-          svg(
+          content_tag(:svg,
             viewBox: "0 0 20 20",
             fill: "currentColor",
             data: {slot: "icon"},
             aria: {hidden: "true"},
-            class: "mr-1 -ml-1 size-5 shrink-0 text-gray-400 dark:text-gray-500"
-          ) do |s|
-            s.path(
+            class: "mr-1 -ml-1 size-5 shrink-0 text-gray-400 dark:text-gray-500") do
+            tag.path(
               d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
               clip_rule: "evenodd",
               fill_rule: "evenodd"
@@ -113,14 +62,13 @@ module Panda
         end
 
         def render_chevron_right_icon
-          svg(
+          content_tag(:svg,
             viewBox: "0 0 20 20",
             fill: "currentColor",
             data: {slot: "icon"},
             aria: {hidden: "true"},
-            class: "size-5 shrink-0 text-gray-400 dark:text-gray-500"
-          ) do |s|
-            s.path(
+            class: "size-5 shrink-0 text-gray-400 dark:text-gray-500") do
+            tag.path(
               d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
               clip_rule: "evenodd",
               fill_rule: "evenodd"

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

@@ -0,0 +1,16 @@
+<nav aria-label="Breadcrumb" id="panda-breadcrumbs" <% if @attrs.any? %><%= tag.attributes(@attrs) %><% end %>>
+  <ol role="list">
+    <li class="inline-block">
+      <a href="<%= Panda::Core.config.admin_path %>" class="text-black/60 hover:text-black/80">
+        <i class="fa fa-solid fa-house fa-fw inline-block w-4 text-center"></i>
+        <span class="sr-only">Home</span>
+      </a>
+    </li>
+    <% @breadcrumbs.each do |crumb| %>
+      <li class="inline-block">
+        <i class="fa-solid fa-chevron-right fa-fw inline-block w-4 text-center font-light text-black/60 hover:text-black/80 px-2"></i>
+        <a href="<%= crumb.path %>" class="text-sm font-normal text-black/60 hover:text-black/80"><%= crumb.name %></a>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Breadcrumbs navigation component for admin pages
+      # Displays hierarchical navigation starting from admin home
+      class BreadcrumbsComponent < Panda::Core::Base
+        def initialize(breadcrumbs: [], **attrs)
+          @breadcrumbs = breadcrumbs
+          super(**attrs)
+        end
+
+        attr_reader :breadcrumbs
+
+        private
+
+        def default_attrs
+          {
+            class: "px-4 w-full sm:px-6 py-2.5"
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<% if @as_button %>
+  <%= content_tag :button, @attrs do %>
+    <%= render_content %>
+  <% end %>
+<% else %>
+  <%= content_tag :a, @attrs do %>
+    <%= render_content %>
+  <% end %>
+<% end %>

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

@@ -4,26 +4,19 @@ module Panda
   module Core
     module Admin
       class ButtonComponent < Panda::Core::Base
-        prop :text, String, default: "Button"
-        prop :action, _Nilable(Symbol), default: -> {}
-        prop :href, _Nilable(String), default: -> { "#" }
-        prop :icon, _Nilable(String), default: -> {}
-        prop :size, Symbol, default: :regular
-        prop :id, _Nilable(String), default: -> {}
-        prop :as_button, _Boolean, default: -> { false }
-
-        def view_template
-          if @as_button
-            button(**@attrs) do
-              render_content
-            end
-          else
-            a(**@attrs) do
-              render_content
-            end
-          end
+        def initialize(text: "Button", action: nil, href: "#", icon: nil, size: :regular, id: nil, as_button: false, **attrs)
+          @text = text
+          @action = action
+          @href = href
+          @icon = icon
+          @size = size
+          @id = id
+          @as_button = as_button
+          super(**attrs)
         end
 
+        attr_reader :text, :action, :href, :icon, :size, :id, :as_button
+
         def default_attrs
           base = {
             class: button_classes,
@@ -40,10 +33,22 @@ module Panda
         private
 
         def render_content
-          if computed_icon
-            i(class: "fa-solid fa-#{computed_icon}")
+          icon_html = if computed_icon
+            content_tag(:i, "", class: "fa-solid fa-#{computed_icon}")
+          else
+            "".html_safe
           end
-          plain @text.titleize
+          text_html = @text.titleize
+
+          if icon_right?
+            (text_html + icon_html).html_safe
+          else
+            (icon_html + text_html).html_safe
+          end
+        end
+
+        def icon_right?
+          @action.in?(%i[save create add new])
         end
 
         def computed_icon
@@ -51,35 +56,35 @@ module Panda
         end
 
         def button_classes
-          base = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer "
+          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-2.5 py-1.5 text-sm "
+            "gap-x-1.5 px-3 py-1.5 text-xs "
           when :medium, :regular, :md
-            "gap-x-1.5 px-3 py-2 text-base "
+            "gap-x-2 px-4 py-2 text-sm "
           when :large, :lg
-            "gap-x-2 px-3.5 py-2.5 text-lg "
+            "gap-x-2 px-5 py-2.5 text-base "
           else
-            "gap-x-1.5 px-3 py-2 text-base "
+            "gap-x-2 px-4 py-2 text-sm "
           end
         end
 
         def action_classes
           case @action
-          when :save, :create
+          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-400"
+            "text-white bg-gray-300 cursor-not-allowed"
           when :secondary
-            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
           when :delete, :destroy, :danger
-            "text-error-600 border border-error-600 bg-error-100 hover:bg-error-200 hover:text-error-700 focus-visible:outline-error-300"
+            "text-error-600 border border-error-200 bg-error-50 hover:bg-error-100 focus-visible:outline-error-300"
           else
-            "text-gray-700 border-2 border-gray-500 bg-white hover:bg-gray-100 active:bg-gray-200 transition-colors"
+            "text-gray-700 border border-gray-200 bg-white hover:bg-gray-50"
           end
         end
 

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

@@ -0,0 +1,17 @@
+<%= content_tag :div, **attrs do %>
+  <div class="flex items-start gap-3">
+    <i class="fa-solid <%= icon_class %> mt-0.5"></i>
+    <div>
+      <% if title.present? %>
+        <div class="text-sm font-medium"><%= title %></div>
+      <% end %>
+      <div class="text-sm">
+        <% if content? %>
+          <%= content %>
+        <% else %>
+          <%= text %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Lightweight callout for inline notices (info, warning, success, error).
+      # Intended for static, in-form guidance (not toast/flash).
+      class CalloutComponent < Panda::Core::Base
+        def initialize(text: nil, title: nil, kind: :info, icon: nil, **attrs)
+          @text = text
+          @title = title
+          @kind = kind
+          @icon = icon
+          super(**attrs)
+        end
+
+        attr_reader :text, :title, :kind, :icon
+
+        def default_attrs
+          {
+            class: "rounded-2xl border px-4 py-3 text-sm #{tone_classes}"
+          }
+        end
+
+        def icon_class
+          icon || default_icon
+        end
+
+        def default_icon
+          case kind
+          when :success
+            "fa-circle-check"
+          when :warning
+            "fa-triangle-exclamation"
+          when :error, :alert
+            "fa-circle-xmark"
+          else
+            "fa-circle-info"
+          end
+        end
+
+        def tone_classes
+          case kind
+          when :success
+            "bg-emerald-50 text-emerald-700 border-emerald-200"
+          when :warning
+            "bg-amber-50 text-amber-700 border-amber-200"
+          when :error, :alert
+            "bg-rose-50 text-rose-700 border-rose-200"
+          else
+            "bg-gray-50 text-gray-700 border-gray-200"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,9 @@
+<%= content_tag :pre, **attrs do %>
+  <code>
+    <% if content? %>
+      <%= content %>
+    <% else %>
+      <%= code %>
+    <% end %>
+  </code>
+<% end %>

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

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Code block component for snippets and examples.
+      class CodeBlockComponent < Panda::Core::Base
+        def initialize(code: nil, **attrs)
+          @code = code
+          super(**attrs)
+        end
+
+        attr_reader :code
+
+        def default_attrs
+          {
+            class: "rounded-xl bg-gray-900/95 p-3 text-xs text-emerald-200 font-mono overflow-x-auto"
+          }
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+<div class="relative" data-controller="toggle">
+  <main class="overflow-auto flex-1 h-full min-h-full max-h-full">
+    <div class="overflow-auto px-2 pt-2 mx-auto sm:px-6 lg:px-6">
+      <% if heading_slot? %>
+        <%= heading_slot %>
+      <% end %>
+
+      <% if tab_bar_slot? %>
+        <%= tab_bar_slot %>
+      <% end %>
+
+      <section class="<%= section_classes %>">
+        <div class="flex-1 mt-4 w-full h-full">
+          <% if body_slot? %>
+            <%= body_slot %>
+          <% elsif content.present? %>
+            <%= content %>
+          <% end %>
+        </div>
+      </section>
+    </div>
+  </main>
+
+  <% if slideover_slot? %>
+    <%= slideover_slot %>
+  <% end %>
+</div>