fernandes-ui 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 436386cb9aedd0c0d4210ee7d89273f2f1edb3b7113a9623af14c2ca52154dc9
-  data.tar.gz: 8e4648b61fca5e049180035807b8369099b91487b4edd7e963dadd5c0fb4c586
+  metadata.gz: da1c77278662e1886130b12bbcbc630a4d19cb0651c81362e6006e8f1a9e5351
+  data.tar.gz: 26c135df8c057f54aa32c8a630e0f551ad1bab59c70b7addf2e1ac7e1a1ff3c4
 SHA512:
-  metadata.gz: 3e0f6d156f7396006300fb59f63fff5d541da6a4af4903ce5c77dea65b29ae56a8becbf699a6be115345f57c5322453d44e344e282213bd314e01c71cc7d8e70
-  data.tar.gz: b9a1b0896a7ec775734ca5879b423c71b46ef2b984b0b2f234a2ee26bd11a3475b12ad32b853358be467b67379931b16ea5e9065230c60d2f28bdf1634d9e040
+  metadata.gz: 26f10d3e9aa1d9ade5064cb6d9cd8b3f6b52c6eed32ddab06d4860128399aa2c88a94fc284b0fa8be23863f50ac0b8a53faf4655b4c1f5fd31bdc38eb57cda6c
+  data.tar.gz: 85458b4aaedfeae39402e9e008f1b329c11a0ce95489f9a44b62183224a4c2848ed005ebc29ab5bf88d5b71eded993321d67d72b8093432650184e211e224b5f

data/README.md

@@ -39,6 +39,13 @@ pin_all_from "ui/controllers", under: "ui/controllers"
 
 The gem automatically provides these pins via the engine.
 
+Then setup the JS controllers
+
+```javascript
+import { registerControllers } from "ui"
+registerControllers(application)
+```
+
 ### JavaScript (jsbundling-rails)
 
 For apps using Bun, esbuild, or Webpack:

data/app/assets/javascripts/ui.esm.js

@@ -2331,8 +2331,10 @@ class AccordionController extends Controller {
       const content = this.contentTargets[index];
       if (content) {
         const isOpen = item.dataset.state === "open";
-        content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-        if (!isOpen) {
+        if (isOpen) {
+          content.style.height = "auto";
+        } else {
+          content.style.height = "0px";
           content.setAttribute("hidden", "");
         }
       }
@@ -2367,6 +2369,9 @@ class AccordionController extends Controller {
       content.removeAttribute("hidden");
       content.style.height = `${content.scrollHeight}px`;
     } else {
+      const currentHeight = content.scrollHeight;
+      content.style.height = `${currentHeight}px`;
+      content.offsetHeight;
       content.style.height = "0px";
       content.addEventListener("transitionend", () => {
         if (content.dataset.state === "closed") {
@@ -2914,6 +2919,10 @@ class CommandController extends Controller {
     loop: {
       type: Boolean,
       default: true
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   };
   connect() {
@@ -2927,7 +2936,7 @@ class CommandController extends Controller {
     this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
   }
   handleShow() {
-    if (this.hasInputTarget) {
+    if (this.autofocusValue && this.hasInputTarget) {
       this.inputTarget.focus();
     }
     const visibleItems = this.visibleItems;

data/app/assets/javascripts/ui.js

@@ -2211,8 +2211,10 @@
         const content = this.contentTargets[index];
         if (content) {
           const isOpen = item.dataset.state === "open";
-          content.style.height = isOpen ? `${content.scrollHeight}px` : "0px";
-          if (!isOpen) {
+          if (isOpen) {
+            content.style.height = "auto";
+          } else {
+            content.style.height = "0px";
             content.setAttribute("hidden", "");
           }
         }
@@ -2247,6 +2249,9 @@
         content.removeAttribute("hidden");
         content.style.height = `${content.scrollHeight}px`;
       } else {
+        const currentHeight = content.scrollHeight;
+        content.style.height = `${currentHeight}px`;
+        content.offsetHeight;
         content.style.height = "0px";
         content.addEventListener("transitionend", () => {
           if (content.dataset.state === "closed") {
@@ -2771,6 +2776,10 @@
       loop: {
         type: Boolean,
         default: true
+      },
+      autofocus: {
+        type: Boolean,
+        default: false
       }
     };
     connect() {
@@ -2784,7 +2793,7 @@
       this.element.removeEventListener("drawer:show", this.handleShow.bind(this));
     }
     handleShow() {
-      if (this.hasInputTarget) {
+      if (this.autofocusValue && this.hasInputTarget) {
         this.inputTarget.focus();
       }
       const visibleItems = this.visibleItems;

data/app/behaviors/ui/accordion_behavior.rb

@@ -1,30 +1,54 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Accordion container component
-    # Handles Stimulus controller setup and data attributes
-    module UI::AccordionBehavior
-      # Generate Stimulus controller data attributes
-      def accordion_data_attributes
-        {
-          controller: "ui--accordion",
-          ui__accordion_type_value: @type || "single",
-          ui__accordion_collapsible_value: @collapsible || false
-        }
-      end
+# UI::AccordionBehavior
+#
+# @ui_component Accordion
+# @ui_description Accordion container component (Phlex) Wraps collapsible accordion items with Stimulus controller
+# @ui_category data-display
+#
+# @ui_anatomy Accordion - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Accordion
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+#
+# @ui_related collapsible
+# @ui_related tabs
+#
+module UI::AccordionBehavior
+  # Generate Stimulus controller data attributes
+  def accordion_data_attributes
+    {
+      controller: "ui--accordion",
+      ui__accordion_type_value: @type || "single",
+      ui__accordion_collapsible_value: @collapsible || false
+    }
+  end
 
-      # Merge user-provided data attributes with accordion controller data
-      def merged_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(accordion_data_attributes)
-      end
+  # Merge user-provided data attributes with accordion controller data
+  def merged_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(accordion_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for accordion container
-      def accordion_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: @classes || "",
-          "data-orientation": @orientation || "vertical",
-          data: merged_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for accordion container
+  def accordion_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: @classes || "",
+      "data-orientation": @orientation || "vertical",
+      data: merged_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/accordion_content_behavior.rb

@@ -2,71 +2,71 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Content component
-    # Handles classes, ARIA attributes, and animations
-    module UI::AccordionContentBehavior
-      # Base CSS classes for content area with animations
-      # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
-      def content_base_classes
-        "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
-      end
+# Shared behavior for Accordion Content component
+# Handles classes, ARIA attributes, and animations
+module UI::AccordionContentBehavior
+  # Base CSS classes for content area with animations
+  # Using transition with Radix UI timing (300ms, cubic-bezier(0.87, 0, 0.13, 1))
+  def content_base_classes
+    "overflow-hidden text-sm transition-[height] duration-[var(--duration-accordion)] ease-[var(--ease-accordion)] data-[state=closed]:h-0"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def content_classes
-        TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def content_classes
+    TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
+  end
 
-      # Generate unique IDs for ARIA relationships (matching trigger)
-      def trigger_id
-        @trigger_id ||= "accordion-trigger-#{item_value}"
-      end
+  # Generate unique IDs for ARIA relationships (matching trigger)
+  def trigger_id
+    @trigger_id ||= "accordion-trigger-#{item_value}"
+  end
 
-      def content_id
-        @content_id ||= "accordion-content-#{item_value}"
-      end
+  def content_id
+    @content_id ||= "accordion-content-#{item_value}"
+  end
 
-      # Get item value from context (set by parent AccordionItem)
-      def item_value
-        @item_value || SecureRandom.hex(4)
-      end
+  # Get item value from context (set by parent AccordionItem)
+  def item_value
+    @item_value || SecureRandom.hex(4)
+  end
 
-      # Determine initial state from context
-      def content_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state from context
+  def content_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Data attributes for Stimulus
-      def content_data_attributes
-        {
-          ui__accordion_target: "content"
-        }
-      end
+  # Data attributes for Stimulus
+  def content_data_attributes
+    {
+      ui__accordion_target: "content"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for content container
-      def content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        attrs = base_attrs.merge(
-          class: content_classes,
-          id: content_id,
-          role: "region",
-          "aria-labelledby": trigger_id,
-          "data-state": content_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_content_data_attributes
-        )
+  # Build complete HTML attributes hash for content container
+  def content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    attrs = base_attrs.merge(
+      class: content_classes,
+      id: content_id,
+      role: "region",
+      "aria-labelledby": trigger_id,
+      "data-state": content_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_content_data_attributes
+    )
 
-        # Add hidden attribute for closed state to prevent flash on initial load
-        # JavaScript will handle the CSS variable for height
-        if content_state == "closed"
-          attrs[:hidden] = true
-        end
-
-        attrs
-      end
+    # Add hidden attribute for closed state to prevent flash on initial load
+    # JavaScript will handle the CSS variable for height
+    if content_state == "closed"
+      attrs[:hidden] = true
     end
+
+    attrs
+  end
+end

data/app/behaviors/ui/accordion_item_behavior.rb

@@ -2,46 +2,46 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Item component
-    # Handles classes, states, and data attributes
-    module UI::AccordionItemBehavior
-      # Base CSS classes for accordion item
-      def item_base_classes
-        "border-b border-border last:border-b-0"
-      end
+# Shared behavior for Accordion Item component
+# Handles classes, states, and data attributes
+module UI::AccordionItemBehavior
+  # Base CSS classes for accordion item
+  def item_base_classes
+    "border-b border-border last:border-b-0"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def item_classes
-        TailwindMerge::Merger.new.merge([item_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def item_classes
+    TailwindMerge::Merger.new.merge([item_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus target
-      def item_data_attributes
-        {
-          ui__accordion_target: "item",
-          value: @value || ""
-        }
-      end
+  # Data attributes for Stimulus target
+  def item_data_attributes
+    {
+      ui__accordion_target: "item",
+      value: @value || ""
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_item_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(item_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_item_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(item_data_attributes)
+  end
 
-      # Determine initial state
-      def item_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state
+  def item_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Build complete HTML attributes hash for accordion item
-      def item_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: item_classes,
-          "data-state": item_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_item_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for accordion item
+  def item_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: item_classes,
+      "data-state": item_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_item_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/accordion_trigger_behavior.rb

@@ -2,78 +2,78 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Accordion Trigger (button) component
-    # Handles classes, ARIA attributes, and unique IDs
-    module UI::AccordionTriggerBehavior
-      # Base CSS classes for trigger button
-      def trigger_base_classes
-        "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:underline [&[data-state=open]>svg]:rotate-180"
-      end
+# Shared behavior for Accordion Trigger (button) component
+# Handles classes, ARIA attributes, and unique IDs
+module UI::AccordionTriggerBehavior
+  # Base CSS classes for trigger button
+  def trigger_base_classes
+    "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:underline [&[data-state=open]>svg]:rotate-180"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def trigger_classes
-        TailwindMerge::Merger.new.merge([trigger_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def trigger_classes
+    TailwindMerge::Merger.new.merge([trigger_base_classes, @classes].compact.join(" "))
+  end
 
-      # Generate unique IDs for ARIA relationships
-      def trigger_id
-        @trigger_id ||= "accordion-trigger-#{item_value}"
-      end
+  # Generate unique IDs for ARIA relationships
+  def trigger_id
+    @trigger_id ||= "accordion-trigger-#{item_value}"
+  end
 
-      def content_id
-        @content_id ||= "accordion-content-#{item_value}"
-      end
+  def content_id
+    @content_id ||= "accordion-content-#{item_value}"
+  end
 
-      # Get item value from context (set by parent AccordionItem)
-      def item_value
-        @item_value || SecureRandom.hex(4)
-      end
+  # Get item value from context (set by parent AccordionItem)
+  def item_value
+    @item_value || SecureRandom.hex(4)
+  end
 
-      # Determine initial state from context
-      def trigger_state
-        @initial_open ? "open" : "closed"
-      end
+  # Determine initial state from context
+  def trigger_state
+    @initial_open ? "open" : "closed"
+  end
 
-      # Determine aria-expanded value
-      def aria_expanded
-        @initial_open ? "true" : "false"
-      end
+  # Determine aria-expanded value
+  def aria_expanded
+    @initial_open ? "true" : "false"
+  end
 
-      # Data attributes for Stimulus
-      def trigger_data_attributes
-        {
-          ui__accordion_target: "trigger",
-          action: "click->ui--accordion#toggle"
-        }
-      end
+  # Data attributes for Stimulus
+  def trigger_data_attributes
+    {
+      ui__accordion_target: "trigger",
+      action: "click->ui--accordion#toggle"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_trigger_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(trigger_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_trigger_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(trigger_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for trigger button
-      def trigger_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: trigger_classes,
-          type: "button",
-          id: trigger_id,
-          "aria-expanded": aria_expanded,
-          "aria-controls": content_id,
-          "data-state": trigger_state,
-          "data-orientation": @orientation || "vertical",
-          data: merged_trigger_data_attributes
-        )
-      end
+  # Build complete HTML attributes hash for trigger button
+  def trigger_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: trigger_classes,
+      type: "button",
+      id: trigger_id,
+      "aria-expanded": aria_expanded,
+      "aria-controls": content_id,
+      "data-state": trigger_state,
+      "data-orientation": @orientation || "vertical",
+      data: merged_trigger_data_attributes
+    )
+  end
 
-      # SVG caret icon (rotation handled by Tailwind's [&[data-state=open]>svg] variant)
-      def caret_svg
-        <<~SVG.html_safe
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-[var(--duration-accordion)]">
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        SVG
-      end
-    end
+  # SVG caret icon (rotation handled by Tailwind's [&[data-state=open]>svg] variant)
+  def caret_svg
+    <<~SVG.html_safe
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-[var(--duration-accordion)]">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    SVG
+  end
+end

data/app/behaviors/ui/alert_behavior.rb

@@ -2,43 +2,60 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Alert component
-    # Handles alert container styling with variants
-    module UI::AlertBehavior
-      # Base CSS classes for alert container
-      # Uses grid layout that adapts when SVG icons are present
-      def alert_base_classes
-        "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-      end
+# UI::AlertBehavior
+#
+# @ui_component Alert
+# @ui_description Alert - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Alert - A callout component for displaying important information to users. (required)
+# @ui_anatomy Description - Description text for an alert component.
+# @ui_anatomy Title - Title text for an alert component.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_aria_pattern Alert
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+# @ui_aria_attr role="alert"
+#
+# @ui_related alert_dialog
+# @ui_related toast
+#
+module UI::AlertBehavior
+  # Base CSS classes for alert container
+  # Uses grid layout that adapts when SVG icons are present
+  def alert_base_classes
+    "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+  end
 
-      # Variant-specific classes
-      def alert_variant_classes
-        case @variant
-        when :destructive
-          "border-destructive text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
-        else # :default
-          "bg-card text-card-foreground"
-        end
-      end
+  # Variant-specific classes
+  def alert_variant_classes
+    case @variant
+    when :destructive
+      "border-destructive text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+    else # :default
+      "bg-card text-card-foreground"
+    end
+  end
 
-      # Merge base classes with variant and custom classes
-      def alert_classes
-        TailwindMerge::Merger.new.merge([alert_base_classes, alert_variant_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with variant and custom classes
+  def alert_classes
+    TailwindMerge::Merger.new.merge([alert_base_classes, alert_variant_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert container
-      def alert_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_classes,
-          role: "alert",
-          "data-slot": "alert"
-        )
-      end
+  # Build complete HTML attributes hash for alert container
+  def alert_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_classes,
+      role: "alert",
+      "data-slot": "alert"
+    )
+  end
 
-      # Renders the alert HTML (for ERB partials)
-      def render_alert(&content_block)
-        all_attributes = alert_html_attributes.deep_merge(@attributes || {})
-        content_tag(:div, **all_attributes, &content_block)
-      end
-    end
+  # Renders the alert HTML (for ERB partials)
+  def render_alert(&content_block)
+    all_attributes = alert_html_attributes.deep_merge(@attributes || {})
+    content_tag(:div, **all_attributes, &content_block)
+  end
+end