panda-core 0.12.2 → 1.1.0

data/app/builders/panda/core/form_builder.rb

@@ -10,6 +10,12 @@ module Panda
         super(attribute, text, options.reverse_merge(class: label_styles))
       end
 
+      # Override field_id to match FormBuilder's signature, since the included
+      # FormTagHelper defines a field_id with a different arity that shadows it.
+      def field_id(method, *suffixes, namespace: @options[:namespace], index: @options[:index])
+        @template.field_id(@object_name, method, *suffixes, namespace: namespace, index: index)
+      end
+
       def text_field(attribute, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -48,6 +54,22 @@ module Panda
         end
       end
 
+      def telephone_field(method, options = {})
+        custom_label = options.delete(:label)
+
+        content_tag :div, class: container_styles do
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def url_field(method, options = {})
+        custom_label = options.delete(:label)
+
+        content_tag :div, class: container_styles do
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
       def datetime_field(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -57,6 +79,31 @@ module Panda
         end
       end
 
+      def datetime_split_field(method, options = {})
+        custom_label = options.delete(:label)
+        value = object.respond_to?(method) ? object.send(method) : nil
+
+        content_tag :div, class: container_styles, data: {controller: "datetime"} do
+          label(method, custom_label) +
+            meta_text(options) +
+            hidden_field(method, data: {datetime_target: "combinedField"}, value: value&.iso8601) +
+            content_tag(:div, class: "flex gap-3") do
+              @template.tag.input(
+                type: "date",
+                class: input_styles,
+                data: {datetime_target: "dateField", action: "change->datetime#update"}
+              ) +
+                @template.tag.input(
+                  type: "time",
+                  step: "60",
+                  class: input_styles,
+                  data: {datetime_target: "timeField", action: "change->datetime#update"}
+                )
+            end +
+            error_message(method)
+        end
+      end
+
       def text_area(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -75,12 +122,24 @@ module Panda
         end
       end
 
-      def select(method, choices = nil, options = {}, html_options = {})
+      def number_field(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
 
         content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, choices, options, html_options.reverse_merge(class: select_styles)) + select_svg + error_message(method)
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def select(method, choices = nil, options = {}, html_options = {})
+        # Extract custom label if provided
+        custom_label = options.delete(:label)
+
+        html_options = html_options.reverse_merge(class: select_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method, custom_label) + meta_text(options) + super(method, choices, options, html_options) + select_svg + error_message(method)
         end
       end
 
@@ -88,19 +147,25 @@ module Panda
         # Extract custom label if provided
         custom_label = options.delete(:label)
 
-        content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options.reverse_merge(class: input_styles)) + error_message(method)
+        html_options = html_options.reverse_merge(class: input_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method, custom_label) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options) + error_message(method)
         end
       end
 
       def time_zone_select(method, priority_zones = nil, options = {}, html_options = {})
-        wrap_field(method, options) do
-          super(
+        html_options = html_options.reverse_merge(class: select_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method) + meta_text(options) + super(
             method,
             priority_zones,
             options,
-            html_options.reverse_merge(class: select_styles)
-          )
+            html_options
+          ) + error_message(method)
         end
       end
 
@@ -125,8 +190,7 @@ module Panda
           content_tag :div, class: container_styles do
             label(method, custom_label) +
               meta_text(options) +
-              # Cropper stylesheet
-              @template.content_tag(:link, nil, rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css") +
+              # Note: cropperjs 2.x uses Web Components with built-in styles — no external CSS needed
               # File input
               content_tag(:div, class: "mt-2") do
                 super(method, options.reverse_merge(
@@ -149,7 +213,7 @@ module Panda
                 @template.image_tag("", alt: "Crop preview", data: {image_cropper_target: "preview"}, class: "max-w-full") +
                   # Cropper controls
                   content_tag(:div, class: "mt-4 flex gap-2 flex-wrap") do
-                    @template.button_tag("Crop & Save", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500", data: {action: "click->image-cropper#crop"}) +
+                    @template.button_tag("Crop & Save", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary-600", data: {action: "click->image-cropper#crop"}) +
                       @template.button_tag("Cancel", type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#cancel"}) +
                       @template.button_tag(type: "button", class: "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50", data: {action: "click->image-cropper#reset"}) do
                         @template.content_tag(:i, "", class: "fa-solid fa-rotate-left") +
@@ -200,7 +264,7 @@ module Panda
                   end +
                     # Upload area
                     content_tag(:div, class: "mt-4 flex items-baseline justify-center text-sm leading-6 text-gray-600 dark:text-gray-400") do
-                      content_tag(:label, for: field_id, class: "relative cursor-pointer rounded-md bg-transparent font-semibold text-indigo-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:focus-within:outline-indigo-500 dark:hover:text-indigo-300") do
+                      content_tag(:label, for: field_id, class: "relative cursor-pointer rounded-md bg-transparent font-semibold text-primary-600 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-primary-600 hover:text-primary-500 dark:text-primary-400 dark:focus-within:outline-primary-500 dark:hover:text-primary-300") do
                         content_tag(:span, "Upload a file") +
                           super(method, options.reverse_merge(
                             id: field_id,
@@ -261,11 +325,11 @@ module Panda
       def submit(value = nil, options = {})
         value ||= submit_default_value
 
-        # Use the primary mid color for save/create actions
-        action = object.persisted? ? :save : :create
+        # Use the primary color for save/create actions
+        action = object&.persisted? ? :save : :create
         button_classes = case action
         when :save, :create
-          "text-white bg-mid hover:bg-mid/80"
+          "text-white bg-primary-500 hover:bg-primary-600"
         when :save_inactive
           "text-white bg-gray-400"
         when :secondary
@@ -275,7 +339,7 @@ module Panda
         end
 
         # Combine with common button classes
-        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 px-3 py-2 #{button_classes}"
+        classes = "inline-flex items-center rounded-md font-medium shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 px-3 py-2 #{button_classes}"
 
         options[:class] = options[:class] ? "#{options[:class]} #{classes}" : classes
 
@@ -287,16 +351,48 @@ module Panda
         custom_label = options.delete(:label)
 
         content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 ml-2"), checked_value, unchecked_value)
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 text-primary-600 focus:ring-primary-500 ml-2"), checked_value, unchecked_value)
         end
       end
 
       def date_field(method, options = {})
-        # Extract custom label if provided
         custom_label = options.delete(:label)
+        date_min = options.delete(:min)
+        date_max = options.delete(:max)
 
-        content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        # Format current value for display
+        raw_value = object.respond_to?(method) ? object.send(method) : nil
+        iso_value = if raw_value.respond_to?(:strftime)
+          raw_value.strftime("%Y-%m-%d")
+        else
+          raw_value
+        end
+        display_value = if raw_value.respond_to?(:strftime)
+          raw_value.strftime("%-d %b %Y")
+        elsif raw_value.is_a?(String) && raw_value.present?
+          raw_value
+        else
+          ""
+        end
+
+        controller_data = {controller: "datepicker"}
+        controller_data[:datepicker_date_min_value] = date_min.to_s if date_min
+        controller_data[:datepicker_date_max_value] = date_max.to_s if date_max
+
+        content_tag :div, class: "#{container_styles} relative", data: controller_data do
+          label(method, custom_label) +
+            meta_text(options) +
+            hidden_field(method, value: iso_value, data: {datepicker_target: "hidden"}) +
+            @template.text_field_tag(
+              nil,
+              display_value,
+              class: "#{input_styles} cursor-pointer",
+              readonly: true,
+              placeholder: options[:placeholder] || "Select date...",
+              data: {datepicker_target: "display", action: "click->datepicker#toggle focus->datepicker#toggle"}
+            ) +
+            content_tag(:div, "", class: "hidden absolute z-50 mt-1 left-0", data: {datepicker_target: "calendar"}) +
+            error_message(method)
         end
       end
 
@@ -317,7 +413,7 @@ module Panda
                 is_checked = (current_value.to_s == choice_value.to_s)
 
                 content_tag(:label, class: "flex items-center gap-x-3 rounded-lg border border-gray-300 px-3 py-3 text-sm/6 font-medium cursor-pointer hover:bg-gray-50 dark:border-white/10 dark:hover:bg-white/5") do
-                  radio_button(method, choice_value, {id: choice_id, checked: is_checked, class: "size-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 dark:border-white/10 dark:bg-white/5"}) +
+                  radio_button(method, choice_value, {id: choice_id, checked: is_checked, class: "size-4 border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-white/10 dark:bg-white/5"}) +
                     content_tag(:span, choice_label, class: "text-gray-900 dark:text-white")
                 end
               end.join.html_safe
@@ -332,8 +428,8 @@ module Panda
       end
 
       def section_heading(text, options = {})
-        @template.content_tag(:div, class: "-mx-4 sm:-mx-6 px-4 sm:px-6 py-4 bg-gray-200 dark:bg-gray-700 mb-6") do
-          @template.content_tag(:h3, text, class: "text-base font-semibold text-gray-900 dark:text-white")
+        @template.content_tag(:div, class: "mt-6 pt-4 border-t border-gray-200 mb-4") do
+          @template.content_tag(:h3, text, class: "text-sm font-semibold text-gray-700")
         end
       end
 
@@ -344,7 +440,7 @@ module Panda
       end
 
       def base_input_styles
-        "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
+        "block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500"
       end
 
       def input_styles
@@ -360,7 +456,7 @@ module Panda
       end
 
       def select_styles
-        "block w-full rounded-md bg-white px-3 py-1.5 pr-8 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 appearance-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-indigo-500"
+        "block w-full rounded-md bg-white px-3 py-1.5 pr-8 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 appearance-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus:outline-primary-500"
       end
 
       def select_svg
@@ -383,7 +479,13 @@ module Panda
       end
 
       def submit_default_value
-        object.persisted? ? "Update #{object.class.name.demodulize}" : "Create #{object.class.name.demodulize}"
+        if object.nil?
+          "Submit"
+        elsif object.persisted?
+          "Update #{object.class.name.demodulize}"
+        else
+          "Create #{object.class.name.demodulize}"
+        end
       end
 
       def wrap_field(method, options = {}, &block)
@@ -401,7 +503,7 @@ module Panda
       def error_message(attribute)
         return unless object.respond_to?(:errors) && object.errors[attribute]&.any?
 
-        content_tag(:p, class: "mt-2 text-sm text-red-600") do
+        content_tag(:p, class: "mt-2 text-sm text-error-600") do
           object.errors[attribute].join(", ")
         end
       end

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

@@ -0,0 +1,10 @@
+<%= content_tag :span, @attrs do %>
+  <%= text %>
+  <% if removable? %>
+    <%= content_tag :button, type: "button", class: "inline-flex items-center ml-1 hover:opacity-70", aria: { label: "Remove" } do %>
+      <%= content_tag :svg, class: "h-3 w-3", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" do %>
+        <%= tag.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 %>

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
@@ -89,15 +85,15 @@ module Panda
         def variant_classes
           case @variant
           when :primary
-            # Blue primary button with dark mode support
-            "bg-blue-600 text-white shadow-xs hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:bg-blue-500 dark:shadow-none dark:hover:bg-blue-400 dark:focus-visible:outline-blue-500"
+            # Primary button with dark mode support
+            "bg-primary-500 text-white shadow-xs hover:bg-primary-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:bg-primary-400 dark:shadow-none dark:hover:bg-primary-500 dark:focus-visible:outline-primary-500"
           when :secondary
             # White/gray secondary button with ring and dark mode support
             "bg-white text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20"
           when :success
-            "bg-green-600 text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600 dark:bg-green-500 dark:shadow-none dark:hover:bg-green-400 dark:focus-visible:outline-green-500"
+            "bg-success-600 text-white shadow-xs hover:bg-success-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success-600 dark:bg-success-500 dark:shadow-none dark:hover:bg-success-600 dark:focus-visible:outline-success-500"
           when :danger
-            "bg-red-600 text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400 dark:focus-visible:outline-red-500"
+            "bg-error-600 text-white shadow-xs hover:bg-error-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error-600 dark:bg-error-500 dark:shadow-none dark:hover:bg-error-600 dark:focus-visible:outline-error-500"
           when :ghost
             "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
           else # :default

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"