panda-core 0.2.4 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea69195a180331f2758bbae8cfc22ccae44cf8b8ac0133b0642c8e4fb7e11e41
-  data.tar.gz: 495cd12223dc77a2c3893568732ae8ae73374bc0bdaf940cf4498227eae082dc
+  metadata.gz: aafa859a0f30c0eac8666376380b18608a5429f760a1f30f2db283504458533d
+  data.tar.gz: 8e63ccaa5fd464c9a7e403a6fa2d3f789bfb0106ce824c31e59f30ffc0bc3dae
 SHA512:
-  metadata.gz: eb217e7a4b3f7ddfee0e9e13e252c5fe31a66535b1b239badf9b0b1bfcd71906effd222b0eb2457b6bd4cd309ba69ac8f7edca6db675f93661b7706969728267
-  data.tar.gz: 7b39637eb2c83328f84f349ff0006b550741d9c91afacdbdc5c9f11102dc25baf58ae24dd514b87891ec1a2c1d0bfa3fee7b623d919a0113ef4644ea2d3d2a62
+  metadata.gz: 8508b00f4c356dfceb223952d34dec3d38eec94078043ab40f08ebcdf2f1e484c2eefbe8534f3c1b86de5b62b71b0cc62dc0c63168e6053f68cf7ed9bf879198
+  data.tar.gz: 8c2c61ff18769f7ee23defaaae9f6d24703328a7e8269079af53508a811ce71dedd8948a0c0906f5927ec8f66e65e04319f4649541e3b928291712f49559088c

data/app/assets/tailwind/application.css

@@ -1,6 +1,15 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+@source "../../app/views/**/*.html.erb";
+@source "../../app/components/**/*.html.erb";
+@source "../../app/components/**/*.rb";
+@source "../../app/helpers/**/*.rb";
+@source "../../../cms/app/views/**/*.html.erb";
+@source "../../../cms/app/components/**/*.html.erb";
+@source "../../../cms/app/components/**/*.rb";
 
 @theme {
+  /* Legacy colors */
   --color-white: var(--color-white);
   --color-black: var(--color-black);
   --color-light: var(--color-light);
@@ -11,13 +20,53 @@
   --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 {
-  html[data-theme="default"] {
+  html[data-theme='default'] {
     --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 */
@@ -28,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"] {
+  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 */
@@ -42,24 +119,139 @@
     --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 {
     position: absolute;
-    content: "";
+    content: '';
     inset: 0;
   }
 
   /* Admin gradient backgrounds */
-  html[data-theme="default"] .bg-gradient-admin {
+  html[data-theme='default'] .bg-gradient-admin {
     background: linear-gradient(to bottom right, rgb(33, 29, 73), rgb(141, 94, 183));
   }
 
-  html[data-theme="sky"] .bg-gradient-admin {
+  html[data-theme='sky'] .bg-gradient-admin {
     background: linear-gradient(to bottom right, rgb(20, 32, 74), rgb(42, 102, 159));
   }
 }
 
+/* Form input styles */
+@layer components {
+  /* Base form field styles - matches panda-cms admin pattern */
+  input[type='text'],
+  input[type='email'],
+  input[type='password'],
+  input[type='url'],
+  input[type='tel'],
+  input[type='number'],
+  input[type='date'],
+  input[type='datetime-local'],
+  input[type='month'],
+  input[type='week'],
+  input[type='time'],
+  input[type='search'],
+  textarea {
+    @apply block w-full rounded-md border-0 p-2 text-gray-900 bg-white;
+    @apply ring-1 ring-inset ring-mid placeholder:text-gray-300;
+    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply hover:cursor-pointer sm:leading-6;
+    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+  }
+
+  /* Select specific styling - matches panda-cms admin pattern */
+  select {
+    @apply block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white;
+    @apply ring-1 ring-inset ring-mid;
+    @apply focus:ring-1 focus:ring-inset focus:ring-dark;
+    @apply hover:cursor-pointer sm:leading-6;
+    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply appearance-none bg-right bg-no-repeat;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-size: 1.5em 1.5em;
+  }
+
+  /* Checkbox and radio styling */
+  input[type='checkbox'],
+  input[type='radio'] {
+    @apply w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded transition-colors duration-200;
+    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
+    @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
+  }
+
+  input[type='radio'] {
+    @apply rounded-full;
+  }
+
+  /* Label styling */
+  label {
+    @apply block text-sm font-medium text-gray-700 mb-1;
+  }
+
+  /* Field wrapper styling */
+  .field {
+    @apply mb-4;
+  }
+
+  /* Error state styling */
+  input.error,
+  textarea.error,
+  select.error {
+    @apply ring-red-500 focus:ring-red-500;
+  }
+
+  .field-error {
+    @apply text-sm text-red-600 mt-1;
+  }
+
+  /* Button styling */
+  .btn {
+    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold rounded-md transition-colors duration-200;
+    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
+    @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+
+  .btn-primary {
+    @apply bg-mid text-white hover:opacity-90 focus:ring-mid;
+  }
+
+  .btn-secondary {
+    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500;
+  }
+
+  .btn-danger {
+    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+  }
+}
+
 /* EditorJS content styles */
 @layer components {
   .codex-editor__redactor .ce-block .ce-block__content {
@@ -103,7 +295,7 @@
       }
 
       .cdx-quote__text {
-        quotes: "\201C" "\201D" "\2018" "\2019";
+        quotes: '\201C' '\201D' '\2018' '\2019';
         @apply pl-6;
 
         &:before {

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/components/panda/core/UI/badge.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Badge component for status indicators, labels, and counts.
+      #
+      # Badges are small, inline elements that highlight an item's status
+      # or provide additional metadata at a glance.
+      #
+      # @example Basic badge
+      #   render Panda::Core::UI::Badge.new(text: "New")
+      #
+      # @example Status badges
+      #   render Panda::Core::UI::Badge.new(text: "Active", variant: :success)
+      #   render Panda::Core::UI::Badge.new(text: "Pending", variant: :warning)
+      #   render Panda::Core::UI::Badge.new(text: "Error", variant: :danger)
+      #
+      # @example With count
+      #   render Panda::Core::UI::Badge.new(text: "99+", variant: :primary, size: :small)
+      #
+      # @example Removable badge
+      #   render Panda::Core::UI::Badge.new(
+      #     text: "Tag",
+      #     removable: true,
+      #     data: { action: "click->tags#remove" }
+      #   )
+      #
+      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 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
+        end
+
+        def default_attrs
+          {
+            class: badge_classes
+          }
+        end
+
+        private
+
+        def badge_classes
+          base = "inline-flex items-center font-medium"
+          base += " #{size_classes}"
+          base += " #{variant_classes}"
+          base += rounded ? " rounded-full" : " rounded"
+          base
+        end
+
+        def size_classes
+          case size
+          when :small, :sm
+            "px-2 py-0.5 text-xs"
+          when :large, :lg
+            "px-3 py-1 text-base"
+          else # :medium, :md
+            "px-2.5 py-0.5 text-sm"
+          end
+        end
+
+        def variant_classes
+          case variant
+          when :primary
+            "bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-700/10"
+          when :success
+            "bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/20"
+          when :warning
+            "bg-yellow-50 text-yellow-800 ring-1 ring-inset ring-yellow-600/20"
+          when :danger
+            "bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10"
+          when :info
+            "bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-700/10"
+          else # :default
+            "bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-500/10"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Modern Phlex-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.
+      #
+      # @example Basic button
+      #   render Panda::Core::UI::Button.new(text: "Click me")
+      #
+      # @example Button as link
+      #   render Panda::Core::UI::Button.new(
+      #     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
+      #   render Panda::Core::UI::Button.new(
+      #     text: "Submit",
+      #     variant: :primary,
+      #     class: "mt-4",
+      #     data: { turbo_method: :post }
+      #   )
+      #
+      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
+        end
+
+        def default_attrs
+          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-semibold"
+          base += " #{size_classes}"
+          base += " #{variant_classes}"
+          base += " disabled:opacity-50 disabled:cursor-not-allowed" if @disabled
+          base
+        end
+
+        def size_classes
+          case @size
+          when :small, :sm
+            "px-2.5 py-1.5 text-sm"
+          when :large, :lg
+            "px-3.5 py-2.5 text-lg"
+          else # :medium, :md
+            "px-3 py-2 text-sm"
+          end
+        end
+
+        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"
+          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"
+          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"
+          when :ghost
+            "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 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
+    end
+  end
+end

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module UI
+      # Card component for containing related content.
+      #
+      # Cards are flexible containers that can hold any content,
+      # with optional padding, shadows, and border variations.
+      #
+      # @example Basic card
+      #   render Panda::Core::UI::Card.new do
+      #     "Card content here"
+      #   end
+      #
+      # @example Card with header and footer
+      #   render Panda::Core::UI::Card.new(padding: :large) do |card|
+      #     card.with_header { h3 { "Card Title" } }
+      #     card.with_body { p { "Main content" } }
+      #     card.with_footer { "Footer content" }
+      #   end
+      #
+      # @example Elevated card with no padding
+      #   render Panda::Core::UI::Card.new(
+      #     elevation: :high,
+      #     padding: :none
+      #   ) do
+      #     img(src: "/image.jpg", alt: "Card image")
+      #   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)
+        end
+
+        def default_attrs
+          {
+            class: card_classes
+          }
+        end
+
+        private
+
+        def card_classes
+          base = "bg-white rounded-lg overflow-hidden"
+          base += " #{padding_classes}"
+          base += " #{elevation_classes}"
+          base += " #{border_classes}"
+          base
+        end
+
+        def padding_classes
+          case padding
+          when :none
+            ""
+          when :small, :sm
+            "p-4"
+          when :large, :lg
+            "p-8"
+          else # :medium, :md
+            "p-6"
+          end
+        end
+
+        def elevation_classes
+          case elevation
+          when :none
+            ""
+          when :medium, :md
+            "shadow-md"
+          when :high, :lg
+            "shadow-lg"
+          else # :low, :sm
+            "shadow-sm"
+          end
+        end
+
+        def border_classes
+          border ? "border border-gray-200" : ""
+        end
+      end
+    end
+  end
+end