plutonium 0.36.0 → 0.37.0

data/lib/plutonium/ui/form/base.rb

@@ -10,6 +10,11 @@ module Plutonium
           include Phlexi::Field::Common::Tokens
           include Plutonium::UI::Form::Options::InferredTypes
 
+          def textarea_tag(**attributes, &)
+            attributes[:data_controller] = tokens(attributes[:data_controller], "textarea-autogrow")
+            super
+          end
+
           def easymde_tag(**, &)
             create_component(Plutonium::UI::Form::Components::Easymde, :easymde, **, &)
           end

data/lib/plutonium/ui/form/components/secure_association.rb

@@ -8,7 +8,7 @@ module Plutonium
           include Plutonium::UI::Component::Methods
 
           def view_template
-            div(class: "flex space-x-1") do
+            div(class: "flex items-center space-x-1") do
               super
               render_add_button
             end
@@ -23,9 +23,9 @@ module Plutonium
 
             a(
               href: add_url,
-              class: "bg-[var(--pu-surface-alt)] hover:bg-[var(--pu-border)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] p-3 focus:ring-2 focus:ring-[var(--pu-border)] focus:outline-none text-[var(--pu-text)] transition-colors"
+              class: "bg-[var(--pu-surface-alt)] hover:bg-[var(--pu-border)] border border-[var(--pu-border)] rounded-[var(--pu-radius-md)] px-4 py-3 focus:ring-2 focus:ring-[var(--pu-border)] focus:outline-none text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] transition-colors"
             ) do
-              render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
+              render Phlex::TablerIcons::Plus.new(class: "w-6 h-6")
             end
           end
 

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.36.0"
+  VERSION = "0.37.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",

data/src/css/slim_select.css

@@ -36,11 +36,25 @@
 
 /* Main container - Updated to match form input theme */
 .ss-main {
-  @apply flex flex-row relative select-none w-full min-h-8 p-2 cursor-pointer border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white text-gray-700 outline-none transition-colors duration-200 overflow-hidden focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply flex flex-row items-center relative select-none w-full px-4 py-3 cursor-pointer border font-medium text-base leading-normal outline-none transition-colors duration-200 overflow-hidden focus:ring-2;
+  background-color: var(--pu-input-bg);
+  border-color: var(--pu-input-border);
+  border-radius: var(--pu-radius-md);
+  color: var(--pu-text);
+}
+.ss-main:hover {
+  border-color: var(--pu-border-strong);
+}
+.ss-main:focus,
+.ss-main[aria-expanded="true"] {
+  border-color: var(--pu-input-focus-ring);
+  box-shadow: 0 0 0 3px theme(colors.primary.500 / 15%);
 }
 
 .ss-main.ss-disabled {
-  @apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-900 dark:text-gray-400;
+  @apply cursor-not-allowed;
+  background-color: var(--pu-surface-alt);
+  color: var(--pu-text-muted);
 }
 
 .ss-main.ss-disabled .ss-values .ss-value .ss-value-delete {
@@ -57,11 +71,12 @@
 
 /* Values container */
 .ss-main .ss-values {
-  @apply inline-flex flex-wrap gap-1 flex-1;
+  @apply inline-flex flex-wrap gap-1 flex-1 items-center min-h-[1.5em];
 }
 
 .ss-main .ss-values .ss-placeholder {
-  @apply flex px-0 py-0 my-auto leading-none items-center w-full text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap dark:text-gray-400;
+  @apply flex px-0 py-0 my-auto items-center w-full overflow-hidden text-ellipsis whitespace-nowrap;
+  color: var(--pu-input-placeholder);
 }
 
 .ss-main .ss-values .ss-max {
@@ -111,7 +126,8 @@
 }
 
 .ss-main .ss-deselect svg path {
-  @apply fill-none stroke-gray-700 dark:stroke-white;
+  @apply fill-none;
+  stroke: var(--pu-text-muted);
   stroke-width: 20;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -123,7 +139,8 @@
 }
 
 .ss-main .ss-arrow path {
-  @apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-white;
+  @apply fill-none transition-transform duration-200;
+  stroke: var(--pu-text-muted);
   stroke-width: 18;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -131,7 +148,10 @@
 
 /* Content container - Updated to match shadow and borders */
 .ss-content {
-  @apply absolute flex h-auto flex-col w-auto max-h-72 border border-gray-300 bg-white shadow-sm transition-all duration-200 opacity-0 z-[10000] overflow-hidden dark:bg-gray-700 dark:border-gray-600;
+  @apply absolute flex h-auto flex-col w-auto max-h-72 border transition-all duration-200 opacity-0 z-[10000] overflow-hidden;
+  background-color: var(--pu-surface);
+  border-color: var(--pu-border);
+  box-shadow: var(--pu-shadow-md);
   transform: scaleY(0);
   transform-origin: top;
 }
@@ -162,14 +182,28 @@
 }
 
 .ss-content .ss-search input {
-  @apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border border-gray-300 rounded-md shadow-sm font-medium text-sm bg-white outline-none text-left placeholder:text-gray-400 focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400;
+  @apply inline-flex flex-auto w-full min-w-0 p-2 m-0 border font-medium text-sm outline-none text-left focus:ring-2;
+  background-color: var(--pu-input-bg);
+  border-color: var(--pu-input-border);
+  border-radius: var(--pu-radius-md);
+  color: var(--pu-text);
   box-sizing: border-box;
   font-size: inherit;
   line-height: inherit;
 }
+.ss-content .ss-search input::placeholder {
+  color: var(--pu-input-placeholder);
+}
+.ss-content .ss-search input:focus {
+  border-color: var(--pu-input-focus-ring);
+  box-shadow: 0 0 0 3px theme(colors.primary.500 / 15%);
+}
 
 .ss-content .ss-search .ss-addable {
-  @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border border-gray-300 rounded-md shadow-sm dark:border-gray-600;
+  @apply inline-flex justify-center items-center cursor-pointer flex-none h-auto ml-2 border;
+  border-color: var(--pu-border);
+  border-radius: var(--pu-radius-md);
+  box-shadow: var(--pu-shadow-sm);
 }
 
 .ss-content .ss-search .ss-addable svg {
@@ -177,7 +211,8 @@
 }
 
 .ss-content .ss-search .ss-addable svg path {
-  @apply fill-none stroke-gray-700 dark:stroke-white;
+  @apply fill-none;
+  stroke: var(--pu-text);
   stroke-width: 18;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -193,7 +228,8 @@
 }
 
 .ss-content .ss-list .ss-searching {
-  @apply text-gray-700 p-2 dark:text-white;
+  @apply p-2;
+  color: var(--pu-text);
 }
 
 .ss-content .ss-list .ss-optgroup.ss-close .ss-option {
@@ -202,11 +238,13 @@
 
 /* Option groups - Updated colors */
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
-  @apply flex flex-row items-center justify-between p-2 bg-gray-50 dark:bg-gray-600;
+  @apply flex flex-row items-center justify-between p-2;
+  background-color: var(--pu-surface-alt);
 }
 
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text {
-  @apply flex-auto font-bold text-gray-700 dark:text-white;
+  @apply flex-auto font-bold;
+  color: var(--pu-text);
 }
 
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) {
@@ -256,7 +294,8 @@
 }
 
 .ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path {
-  @apply fill-none stroke-gray-700 transition-transform duration-200 dark:stroke-white;
+  @apply fill-none transition-transform duration-200;
+  stroke: var(--pu-text);
   stroke-width: 18;
   stroke-linecap: round;
   stroke-linejoin: round;
@@ -268,7 +307,8 @@
 
 /* Options - Updated text colors to match theme */
 .ss-content .ss-list .ss-option {
-  @apply block p-2 whitespace-normal text-gray-700 cursor-pointer select-none hover:bg-primary-500 hover:text-white dark:text-white dark:hover:bg-primary-500 dark:hover:text-white;
+  @apply block p-2 whitespace-normal cursor-pointer select-none hover:bg-primary-500 hover:text-white;
+  color: var(--pu-text);
   min-height: 0;
 }
 
@@ -282,11 +322,14 @@
 }
 
 .ss-content .ss-list .ss-option.ss-disabled {
-  @apply cursor-not-allowed bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400;
+  @apply cursor-not-allowed;
+  background-color: var(--pu-surface-alt);
+  color: var(--pu-text-muted);
 }
 
 .ss-content .ss-list .ss-option.ss-disabled:hover {
-  @apply text-gray-500 bg-gray-100 dark:text-gray-400 dark:bg-gray-800;
+  background-color: var(--pu-surface-alt);
+  color: var(--pu-text-muted);
 }
 
 .ss-content .ss-list .ss-option .ss-search-highlight {
@@ -295,19 +338,33 @@
 
 /* Additional state classes to match form validation states */
 .ss-main.ss-invalid {
-  @apply bg-red-50 border-red-500 dark:border-red-500 text-red-900 dark:text-red-500 focus:ring-red-500 focus:border-red-500;
+  @apply border-danger-500 bg-danger-50/50 text-danger-900;
+}
+.ss-main.ss-invalid:focus,
+.ss-main.ss-invalid[aria-expanded="true"] {
+  box-shadow: 0 0 0 3px theme(colors.danger.500 / 15%);
+}
+.dark .ss-main.ss-invalid {
+  @apply bg-danger-950/20 border-danger-500/70 text-danger-200;
 }
 
 .ss-main.ss-invalid .ss-values .ss-placeholder {
-  @apply text-red-700 dark:text-red-500;
+  @apply text-danger-400;
 }
 
 .ss-main.ss-valid {
-  @apply bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 focus:ring-green-500 focus:border-green-500;
+  @apply border-success-500 bg-success-50/50 text-success-900;
+}
+.ss-main.ss-valid:focus,
+.ss-main.ss-valid[aria-expanded="true"] {
+  box-shadow: 0 0 0 3px theme(colors.success.500 / 15%);
+}
+.dark .ss-main.ss-valid {
+  @apply bg-success-950/20 border-success-500/70 text-success-200;
 }
 
 .ss-main.ss-valid .ss-values .ss-placeholder {
-  @apply text-green-700 dark:text-green-500;
+  @apply text-success-400;
 }
 
 /* Modal-specific styles for SlimSelect dropdown */

data/src/js/controllers/register_controllers.js

@@ -22,6 +22,7 @@ import RemoteModalController from "./remote_modal_controller.js"
 import KeyValueStoreController from "./key_value_store_controller.js"
 import BulkActionsController from "./bulk_actions_controller.js"
 import FilterPanelController from "./filter_panel_controller.js"
+import TextareaAutogrowController from "./textarea_autogrow_controller.js"
 
 export default function (application) {
   // Register controllers here
@@ -48,4 +49,5 @@ export default function (application) {
   application.register("key-value-store", KeyValueStoreController)
   application.register("bulk-actions", BulkActionsController)
   application.register("filter-panel", FilterPanelController)
+  application.register("textarea-autogrow", TextareaAutogrowController)
 }

data/src/js/controllers/textarea_autogrow_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    maxHeight: { type: Number, default: 0 } // 0 means use CSS max-height or 50vh
+  }
+
+  connect() {
+    this.resize()
+    this.element.addEventListener("input", this.resize)
+    window.addEventListener("resize", this.resize)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("input", this.resize)
+    window.removeEventListener("resize", this.resize)
+  }
+
+  resize = () => {
+    const element = this.element
+    const maxHeight = this.#getMaxHeight()
+
+    // Reset to auto to get the natural scroll height
+    element.style.height = "auto"
+    element.style.overflow = "hidden"
+
+    const scrollHeight = element.scrollHeight
+
+    if (maxHeight > 0 && scrollHeight > maxHeight) {
+      element.style.height = `${maxHeight}px`
+      element.style.overflow = "auto"
+    } else {
+      element.style.height = `${scrollHeight}px`
+    }
+  }
+
+  #getMaxHeight() {
+    if (this.maxHeightValue > 0) {
+      return this.maxHeightValue
+    }
+
+    // Check for CSS max-height
+    const computedStyle = window.getComputedStyle(this.element)
+    const cssMaxHeight = computedStyle.maxHeight
+
+    if (cssMaxHeight && cssMaxHeight !== "none") {
+      const parsed = parseFloat(cssMaxHeight)
+      if (!isNaN(parsed) && parsed > 0) {
+        return parsed
+      }
+    }
+
+    // Default to 300px
+    return 300
+  }
+}