panda-core 0.4.1 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1571548de89ff0ad16010f4500ed47a1c53dda70c730945fa439272a33567999
-  data.tar.gz: 02cc839e0831b886a37729b43a5d185d1bd7a13eb3ff59dd2e3afc0f7996e4cd
+  metadata.gz: 4aa145ee85e5b0c497754d7d218ceb3cc7c4de6065e3357f85e0676186df37f1
+  data.tar.gz: 9425c978a3208aca75045e4cf1e36408088829a73c19d10746a91cefc320db6f
 SHA512:
-  metadata.gz: acaebae64c9e8b970edda07e35f0b3820e988d3c738c3cf0c4d9c647be828d98773992d6a1ab70a4dc74cc01edaa04582a43c0fa285222a2e2d8169afaba7ac0
-  data.tar.gz: 927db64e6429b4687667e8e47b185abea96e1f50668b5e6abe2d36050a1606aac880610f94d2f08205fb4a1280e3c95f05f8c45a8afc1d03ca10a38fad0abdd5
+  metadata.gz: ef76d583b1a36ecef8d13788338a847457bcd36a8efddf9582dcb1a7fc7ee484cb689f5dea6f9628d1fc46e2e7e2f513c84b6531116059496bb5e2e862d82f32
+  data.tar.gz: 982d52f5927bddf30b2c6ab1d3981e78e542fba07717628d73f4375c8819ebf29a151eaf08f0f89fea48d06830c52315d3ff9a996d19472696c061597d529bd4

data/app/assets/tailwind/application.css

@@ -9,6 +9,7 @@
 @source "../../../cms/app/components/**/*.rb";
 
 @theme {
+  /* Legacy colors */
   --color-white: var(--color-white);
   --color-black: var(--color-black);
   --color-light: var(--color-light);
@@ -19,6 +20,45 @@
   --color-inactive: var(--color-inactive);
   --color-warning: var(--color-warning);
   --color-error: var(--color-error);
+
+  /* Tailwind UI compatible primary scale */
+  --color-primary-50: var(--color-primary-50);
+  --color-primary-100: var(--color-primary-100);
+  --color-primary-200: var(--color-primary-200);
+  --color-primary-300: var(--color-primary-300);
+  --color-primary-400: var(--color-primary-400);
+  --color-primary-500: var(--color-primary-500);
+  --color-primary-600: var(--color-primary-600);
+  --color-primary-700: var(--color-primary-700);
+  --color-primary-800: var(--color-primary-800);
+  --color-primary-900: var(--color-primary-900);
+  --color-primary-950: var(--color-primary-950);
+
+  /* Map indigo to primary for Tailwind UI compatibility */
+  --color-indigo-50: var(--color-primary-50);
+  --color-indigo-100: var(--color-primary-100);
+  --color-indigo-200: var(--color-primary-200);
+  --color-indigo-300: var(--color-primary-300);
+  --color-indigo-400: var(--color-primary-400);
+  --color-indigo-500: var(--color-primary-500);
+  --color-indigo-600: var(--color-primary-600);
+  --color-indigo-700: var(--color-primary-700);
+  --color-indigo-800: var(--color-primary-800);
+  --color-indigo-900: var(--color-primary-900);
+  --color-indigo-950: var(--color-primary-950);
+
+  /* Gray scale */
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
 }
 
 @layer base {
@@ -26,6 +66,7 @@
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
+    /* Legacy color variables (kept for backwards compatibility) */
     --color-light: rgb(238, 206, 230); /* #EECEE6 */
     --color-mid: rgb(141, 94, 183); /* #8D5EB7 */
     --color-dark: rgb(33, 29, 73); /* #211D49 */
@@ -36,11 +77,39 @@
     --color-warning: rgb(250, 207, 142); /* #FACF8E */
     --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
     --color-error: rgb(245, 129, 129); /* #F58181 */
+
+    /* Full Tailwind UI compatible color scale - Primary (Purple palette) */
+    --color-primary-50: rgb(250, 245, 255); /* Very light purple */
+    --color-primary-100: rgb(243, 232, 255); /* Lighter purple */
+    --color-primary-200: rgb(233, 213, 255); /* Light purple */
+    --color-primary-300: rgb(216, 180, 254); /* Medium light purple */
+    --color-primary-400: rgb(192, 132, 252); /* Medium purple */
+    --color-primary-500: rgb(141, 94, 183); /* Main brand color (mid) */
+    --color-primary-600: rgb(120, 80, 160); /* Darker purple */
+    --color-primary-700: rgb(100, 65, 140); /* Dark purple */
+    --color-primary-800: rgb(60, 45, 100); /* Very dark purple */
+    --color-primary-900: rgb(33, 29, 73); /* Darkest (dark) */
+    --color-primary-950: rgb(24, 20, 50); /* Ultra dark */
+
+    /* Gray scale for UI elements */
+    --color-gray-50: rgb(249, 250, 251);
+    --color-gray-100: rgb(243, 244, 246);
+    --color-gray-200: rgb(229, 231, 235);
+    --color-gray-300: rgb(209, 213, 219);
+    --color-gray-400: rgb(156, 163, 175);
+    --color-gray-500: rgb(107, 114, 128);
+    --color-gray-600: rgb(75, 85, 99);
+    --color-gray-700: rgb(55, 65, 81);
+    --color-gray-800: rgb(31, 41, 55);
+    --color-gray-900: rgb(17, 24, 39);
+    --color-gray-950: rgb(3, 7, 18);
   }
 
   html[data-theme='sky'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
+
+    /* Legacy color variables (kept for backwards compatibility) */
     --color-light: rgb(204, 238, 242); /* #CCEEF2 */
     --color-mid: rgb(42, 102, 159); /* #2A669F */
     --color-dark: rgb(20, 32, 74); /* #14204A */
@@ -50,6 +119,32 @@
     --color-warning: rgb(244, 190, 102); /* #F4BE66 */
     --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
     --color-error: rgb(208, 64, 20); /* #D04014 */
+
+    /* Full Tailwind UI compatible color scale - Primary (Blue palette) */
+    --color-primary-50: rgb(240, 249, 255); /* Very light blue */
+    --color-primary-100: rgb(224, 242, 254); /* Lighter blue */
+    --color-primary-200: rgb(186, 230, 253); /* Light blue */
+    --color-primary-300: rgb(125, 211, 252); /* Medium light blue */
+    --color-primary-400: rgb(56, 189, 248); /* Medium blue */
+    --color-primary-500: rgb(42, 102, 159); /* Main brand color (mid) */
+    --color-primary-600: rgb(35, 85, 132); /* Darker blue */
+    --color-primary-700: rgb(28, 68, 106); /* Dark blue */
+    --color-primary-800: rgb(22, 52, 82); /* Very dark blue */
+    --color-primary-900: rgb(20, 32, 74); /* Darkest (dark) */
+    --color-primary-950: rgb(15, 24, 55); /* Ultra dark */
+
+    /* Gray scale for UI elements (same across themes) */
+    --color-gray-50: rgb(249, 250, 251);
+    --color-gray-100: rgb(243, 244, 246);
+    --color-gray-200: rgb(229, 231, 235);
+    --color-gray-300: rgb(209, 213, 219);
+    --color-gray-400: rgb(156, 163, 175);
+    --color-gray-500: rgb(107, 114, 128);
+    --color-gray-600: rgb(75, 85, 99);
+    --color-gray-700: rgb(55, 65, 81);
+    --color-gray-800: rgb(31, 41, 55);
+    --color-gray-900: rgb(17, 24, 39);
+    --color-gray-950: rgb(3, 7, 18);
   }
 
   a.block-link:after {

data/app/assets/tailwind/tailwind.config.js

@@ -18,4 +18,12 @@ module.exports = {
       "../../../cms/vendor/javascript/**/*.js",
     ],
   },
+  safelist: [
+    // Tree indentation classes used in pages/index
+    'ml-4',
+    'ml-8',
+    'ml-12',
+    'ml-16',
+    'ml-24',
+  ],
 };

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

@@ -11,6 +11,13 @@ module Panda
       end
 
       def text_field(attribute, options = {})
+        # Add disabled/readonly styling
+        field_classes = if options[:readonly] || options[:disabled]
+          readonly_input_styles
+        else
+          input_styles
+        end
+
         if options.dig(:data, :prefix)
           content_tag :div, class: container_styles do
             label(attribute) + meta_text(options) +
@@ -19,12 +26,12 @@ module Panda
                   class: "inline-flex items-center px-3 text-base border border-r-none rounded-s-md whitespace-nowrap break-keep") do
                   options.dig(:data, :prefix)
                 end +
-                  super(attribute, options.reverse_merge(class: "#{input_styles_prefix} input-prefix rounded-l-none border-l-none"))
+                  super(attribute, options.reverse_merge(class: "#{field_classes} input-prefix rounded-l-none border-l-none"))
               end + error_message(attribute)
           end
         else
           content_tag :div, class: container_styles do
-            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: input_styles)) + error_message(attribute)
+            label(attribute) + meta_text(options) + super(attribute, options.reverse_merge(class: field_classes)) + error_message(attribute)
           end
         end
       end
@@ -77,8 +84,121 @@ module Panda
       end
 
       def file_field(method, options = {})
-        content_tag :div, class: container_styles do
-          label(method) + meta_text(options) + super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+        # Check if cropper is requested
+        with_cropper = options.delete(:with_cropper)
+
+        # Check if simple mode is requested (no fancy upload UI)
+        simple_mode = options.delete(:simple)
+
+        if with_cropper
+          # Image upload with cropper
+          aspect_ratio = options.delete(:aspect_ratio) # e.g., 1.91 for OG images (1200x630)
+          min_width = options.delete(:min_width) || 0
+          min_height = options.delete(:min_height) || 0
+          accept_types = options.delete(:accept) || "image/*"
+          field_id = "#{object_name}_#{method}"
+
+          content_tag :div, class: container_styles do
+            label(method) +
+              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") +
+              # File input
+              content_tag(:div, class: "mt-2") do
+                super(method, options.reverse_merge(
+                  id: field_id,
+                  accept: accept_types,
+                  class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50 #{input_styles}",
+                  data: {
+                    controller: "image-cropper",
+                    image_cropper_target: "input",
+                    action: "change->image-cropper#handleFileSelect",
+                    image_cropper_aspect_ratio_value: aspect_ratio,
+                    image_cropper_min_width_value: min_width,
+                    image_cropper_min_height_value: min_height
+                  }
+                ))
+              end +
+              # Cropper container (hidden by default)
+              content_tag(:div, class: "hidden mt-4 bg-gray-100 dark:bg-gray-800 p-4 rounded-lg", data: {image_cropper_target: "cropperContainer"}) do
+                # Preview image
+                @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("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") +
+                          @template.content_tag(:span, "Reset")
+                      end +
+                      @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#rotate", degrees: "90"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-rotate-right") +
+                          @template.content_tag(:span, "Rotate")
+                      end +
+                      @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#flip", direction: "horizontal"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-arrows-left-right") +
+                          @template.content_tag(:span, "Flip H")
+                      end +
+                      @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#zoom", ratio: "0.1"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-magnifying-glass-plus") +
+                          @template.content_tag(:span, "Zoom In")
+                      end +
+                      @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#zoom", ratio: "-0.1"}) do
+                        @template.content_tag(:i, "", class: "fa-solid fa-magnifying-glass-minus") +
+                          @template.content_tag(:span, "Zoom Out")
+                      end
+                  end
+              end
+          end
+        elsif simple_mode
+          # Simple file input with basic styling
+          content_tag :div, class: container_styles do
+            label(method) +
+              meta_text(options) +
+              super(method, options.reverse_merge(class: "file:rounded file:border-0 file:text-sm file:bg-white file:text-gray-500 hover:file:bg-gray-50 bg-white px-2.5 hover:bg-gray-50".concat(input_styles)))
+          end
+        else
+          # Fancy drag-and-drop UI
+          accept_types = options.delete(:accept) || "image/*"
+          max_size = options.delete(:max_size) || "10MB"
+          file_types_display = options.delete(:file_types_display) || "PNG, JPG, GIF"
+
+          field_id = "#{object_name}_#{method}"
+
+          content_tag :div, class: "#{container_styles} col-span-full", data: {controller: "file-upload"} do
+            label(method) +
+              meta_text(options) +
+              content_tag(:div, class: "mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10 dark:border-white/25 transition-colors", data: {file_upload_target: "dropzone"}) do
+                content_tag(:div, class: "text-center") do
+                  # Icon
+                  @template.content_tag(:svg, viewBox: "0 0 24 24", fill: "currentColor", "data-slot": "icon", "aria-hidden": true, class: "mx-auto size-12 text-gray-300 dark:text-gray-600") do
+                    @template.content_tag(:path, nil, d: "M1.5 6a2.25 2.25 0 0 1 2.25-2.25h16.5A2.25 2.25 0 0 1 22.5 6v12a2.25 2.25 0 0 1-2.25 2.25H3.75A2.25 2.25 0 0 1 1.5 18V6ZM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0 0 21 18v-1.94l-2.69-2.689a1.5 1.5 0 0 0-2.12 0l-.88.879.97.97a.75.75 0 1 1-1.06 1.06l-5.16-5.159a1.5 1.5 0 0 0-2.12 0L3 16.061Zm10.125-7.81a1.125 1.125 0 1 1 2.25 0 1.125 1.125 0 0 1-2.25 0Z", "clip-rule": "evenodd", "fill-rule": "evenodd")
+                  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(:span, "Upload a file") +
+                          super(method, options.reverse_merge(
+                            id: field_id,
+                            accept: accept_types,
+                            class: "sr-only",
+                            data: {
+                              file_upload_target: "input",
+                              action: "change->file-upload#handleFileSelect"
+                            }
+                          ))
+                      end +
+                        content_tag(:span, "or drag and drop", class: "pl-1")
+                    end +
+                    # File type info
+                    content_tag(:p, "#{file_types_display} up to #{max_size}", class: "text-xs/5 text-gray-600 dark:text-gray-400")
+                end
+              end +
+              # File info display (hidden by default)
+              content_tag(:div, "", class: "hidden mt-3", data: {file_upload_target: "fileInfo"}) +
+              # Preview display (hidden by default)
+              content_tag(:div, "", class: "hidden mt-3", data: {file_upload_target: "preview"})
+          end
         end
       end
 
@@ -117,11 +237,11 @@ module Panda
       def submit(value = nil, options = {})
         value ||= submit_default_value
 
-        # Use the same style logic as ButtonComponent
+        # Use the primary mid color for save/create actions
         action = object.persisted? ? :save : :create
         button_classes = case action
         when :save, :create
-          "text-white bg-green-600 hover:bg-green-700"
+          "text-white bg-mid hover:bg-mid/80"
         when :save_inactive
           "text-white bg-gray-400"
         when :secondary
@@ -150,32 +270,64 @@ module Panda
         end
       end
 
+      def radio_button_group(method, choices, options = {})
+        current_value = object.send(method)
+
+        content_tag :div, class: container_styles do
+          label(method) +
+            meta_text(options) +
+            content_tag(:div, class: "mt-2 space-y-2") do
+              choices.map do |choice|
+                choice_value = choice.is_a?(Array) ? choice.last : choice
+                choice_label = choice.is_a?(Array) ? choice.first : choice.to_s.humanize
+                choice_id = "#{object_name}_#{method}_#{choice_value}"
+                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"}) +
+                    content_tag(:span, choice_label, class: "text-gray-900 dark:text-white")
+                end
+              end.join.html_safe
+            end
+        end
+      end
+
       def meta_text(options)
         return unless options[:meta]
 
         @template.content_tag(:p, options[:meta], class: "block text-black/60 text-sm mb-2")
       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")
+        end
+      end
+
       private
 
       def label_styles
-        "font-light inline-block mb-1 text-base leading-6"
+        "block text-sm/6 font-medium text-gray-900 dark:text-gray-100"
       end
 
       def base_input_styles
-        "bg-white block w-full rounded-md border border-gray-500 focus:border-gray-700 p-2 text-gray-900 outline-0 focus:outline-0 ring-0 focus:ring-0 focus:ring-gray-700 ring-offset-0 focus:ring-offset-0 shadow-none focus:shadow-none"
+        "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"
       end
 
       def input_styles
         base_input_styles
       end
 
+      def readonly_input_styles
+        "block w-full rounded-md bg-gray-50 px-3 py-1.5 text-base text-gray-500 outline-1 -outline-offset-1 outline-gray-200 cursor-not-allowed sm:text-sm/6 dark:bg-white/10 dark:text-gray-500 dark:outline-white/5"
+      end
+
       def input_styles_prefix
-        input_styles.concat(" prefix")
+        "#{input_styles} prefix"
       end
 
       def select_styles
-        "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-gray-900 text-base outline-0 outline-gray-700 focus:outline focus:-outline-offset-2 focus:outline-gray-700"
+        "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"
       end
 
       def select_svg
@@ -194,7 +346,7 @@ module Panda
       end
 
       def textarea_styles
-        input_styles.concat(" min-h-32")
+        "#{input_styles} min-h-32"
       end
 
       def submit_default_value

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

@@ -5,17 +5,24 @@ module Panda
     module UI
       # Modern Phlex-based button component with type-safe props.
       #
-      # This component demonstrates the recommended pattern for building
-      # Phlex components in the Panda ecosystem using the shared base class.
+      # Supports both <button> and <a> elements based on whether an href is provided.
+      # Follows Tailwind UI Plus styling patterns with dark mode support.
       #
-      # @example Basic usage
+      # @example Basic button
       #   render Panda::Core::UI::Button.new(text: "Click me")
       #
-      # @example With variant
+      # @example Button as link
       #   render Panda::Core::UI::Button.new(
-      #     text: "Delete",
-      #     variant: :danger,
-      #     size: :large
+      #     text: "Edit",
+      #     variant: :secondary,
+      #     href: "/admin/posts/1/edit"
+      #   )
+      #
+      # @example Primary action button
+      #   render Panda::Core::UI::Button.new(
+      #     text: "Publish",
+      #     variant: :primary,
+      #     href: "/admin/posts/1/publish"
       #   )
       #
       # @example With custom attributes
@@ -33,54 +40,68 @@ module Panda
         prop :size, Symbol, default: :medium
         prop :disabled, _Boolean, default: false
         prop :type, String, default: "button"
+        prop :href, _Nilable(String), default: -> {}
 
         def view_template
-          button(**@attrs) { text }
+          if @href
+            a(**@attrs) { @text }
+          else
+            button(**@attrs) { @text }
+          end
         end
 
         def default_attrs
-          {
-            type: type,
-            disabled: disabled,
+          base = {
             class: button_classes
           }
+
+          if @href
+            base[:href] = @href
+          else
+            base[:type] = @type
+            base[:disabled] = @disabled if @disabled
+          end
+
+          base
         end
 
         private
 
         def button_classes
-          base = "inline-flex items-center rounded-md font-medium shadow-sm transition-colors"
+          base = "inline-flex items-center rounded-md font-semibold"
           base += " #{size_classes}"
           base += " #{variant_classes}"
-          base += " disabled:opacity-50 disabled:cursor-not-allowed" if disabled
+          base += " disabled:opacity-50 disabled:cursor-not-allowed" if @disabled
           base
         end
 
         def size_classes
-          case size
+          case @size
           when :small, :sm
-            "gap-x-1.5 px-2.5 py-1.5 text-sm"
+            "px-2.5 py-1.5 text-sm"
           when :large, :lg
-            "gap-x-2 px-3.5 py-2.5 text-lg"
+            "px-3.5 py-2.5 text-lg"
           else # :medium, :md
-            "gap-x-1.5 px-3 py-2 text-base"
+            "px-3 py-2 text-sm"
           end
         end
 
         def variant_classes
-          case variant
+          case @variant
           when :primary
-            "bg-blue-600 text-white hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+            # 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"
           when :secondary
-            "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            # 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 hover:bg-green-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+            "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"
           when :danger
-            "bg-red-600 text-white hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+            "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"
           when :ghost
-            "bg-transparent text-gray-700 hover:bg-gray-100"
+            "bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
           else # :default
-            "bg-gray-700 text-white hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700"
+            "bg-gray-700 text-white shadow-xs hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:bg-gray-600 dark:shadow-none dark:hover:bg-gray-500 dark:focus-visible:outline-gray-600"
           end
         end
       end

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

@@ -0,0 +1,133 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Breadcrumb navigation component with responsive behavior.
+      #
+      # Shows a "Back" link on mobile and full breadcrumb trail on larger screens.
+      # Follows Tailwind UI Plus pattern for breadcrumb navigation.
+      #
+      # @example Basic breadcrumbs
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Pages", href: "/admin/pages" },
+      #       { text: "Blog Posts", href: "/admin/pages/blog" },
+      #       { text: "Edit Post", href: "/admin/pages/blog/1/edit" }
+      #     ]
+      #   )
+      #
+      # @example Without back link (first page in section)
+      #   render Panda::Core::Admin::BreadcrumbComponent.new(
+      #     items: [
+      #       { text: "Dashboard", href: "/admin" }
+      #     ],
+      #     show_back: false
+      #   )
+      #
+      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
+        end
+
+        private
+
+        def back_link_href
+          (@items.length > 1) ? @items[-2][:href] : @items.first[:href]
+        end
+
+        def breadcrumb_link_classes(index)
+          base = "text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          base += " ml-4" unless index.zero?
+          base
+        end
+
+        def render_chevron_left_icon
+          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(
+              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"
+            )
+          end
+        end
+
+        def render_chevron_right_icon
+          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(
+              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"
+            )
+          end
+        end
+      end
+    end
+  end
+end