fernandes-ui 0.1.2 → 0.1.5

data/app/components/ui/dropdown_menu_trigger.rb

@@ -31,8 +31,9 @@ class UI::DropdownMenuTrigger < Phlex::HTML
     trigger_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
 
     if @as_child
-      # Yield attributes to block - child receives trigger behavior
-      yield(trigger_attrs) if block_given?
+      # When as_child is true, only pass functional attributes (data, aria, tabindex, role)
+      # The child component handles its own styling (following shadcn pattern)
+      yield(trigger_attrs.except(:class)) if block_given?
     else
       # Default: render wrapper div with trigger behavior
       div(**trigger_attrs) do

data/app/components/ui/input_group_button.rb

@@ -28,11 +28,18 @@ class UI::InputGroupButton < Phlex::HTML
   end
 
   def view_template(&block)
+    # Merge classes from @attributes[:class] with input_group_button_classes
+    # This is needed when as_child patterns pass classes through attributes
+    merged_classes = TailwindMerge::Merger.new.merge([
+      input_group_button_classes,
+      @attributes[:class]
+    ].compact.join(" "))
+
     # Use input_group_button_classes which includes button behavior + input group styling
     button(
       type: @type,
-      class: input_group_button_classes,
-      **@attributes.except(:type, :variant, :size)
+      class: merged_classes,
+      **@attributes.except(:type, :variant, :size, :class)
     ) do
       yield if block_given?
     end

data/app/components/ui/navigation_menu_content.rb

@@ -14,7 +14,7 @@
 #     end
 #   end
 class UI::NavigationMenuContent < Phlex::HTML
-  include UI::ContentBehavior
+  include UI::NavigationMenuContentBehavior
 
   # @param viewport [Boolean] Whether content should be rendered in viewport (inherited from parent)
   # @param classes [String] Additional CSS classes to merge

data/app/components/ui/navigation_menu_item.rb

@@ -17,7 +17,7 @@
 #     render UI::Link.new(href: "/about") { "About" }
 #   end
 class UI::NavigationMenuItem < Phlex::HTML
-  include UI::ItemBehavior
+  include UI::NavigationMenuItemBehavior
 
   # @param value [String] Optional value for controlled state
   # @param classes [String] Additional CSS classes to merge

data/app/components/ui/navigation_menu_link.rb

@@ -20,7 +20,7 @@
 #     link_to "About", about_path, **link_attrs
 #   end
 class UI::NavigationMenuLink < Phlex::HTML
-  include UI::LinkBehavior
+  include UI::NavigationMenuLinkBehavior
   include UI::SharedAsChildBehavior
 
   # @param href [String] URL for the link (ignored when as_child: true)

data/app/components/ui/navigation_menu_list.rb

@@ -11,7 +11,7 @@
 #     end
 #   end
 class UI::NavigationMenuList < Phlex::HTML
-  include UI::ListBehavior
+  include UI::NavigationMenuListBehavior
 
   # @param classes [String] Additional CSS classes to merge
   # @param attributes [Hash] Additional HTML attributes

data/app/components/ui/navigation_menu_trigger.rb

@@ -11,7 +11,7 @@
 # @example First trigger (receives initial focus)
 #   render UI::Trigger.new(first: true) { "Home" }
 class UI::NavigationMenuTrigger < Phlex::HTML
-  include UI::TriggerBehavior
+  include UI::NavigationMenuTriggerBehavior
 
   # @param first [Boolean] Whether this is the first trigger (gets tabindex=0)
   # @param classes [String] Additional CSS classes to merge

data/app/components/ui/popover.rb

@@ -5,6 +5,8 @@
 # Container for popover trigger and content.
 # Uses PopoverBehavior concern for shared styling logic.
 #
+# Supports asChild pattern for composition without wrapper elements.
+#
 # @example Basic usage
 #   render UI::Popover.new do
 #     render UI::Trigger.new do
@@ -14,9 +16,20 @@
 #       plain "Popover content"
 #     end
 #   end
+#
+# @example With asChild - pass attributes to custom element
+#   render UI::Popover.new(as_child: true) do |popover_attrs|
+#     render UI::InputGroupAddon.new(**popover_attrs) do
+#       render UI::PopoverTrigger.new(as_child: true) do |trigger_attrs|
+#         render UI::InputGroupButton.new(**trigger_attrs) { "Info" }
+#       end
+#       render UI::PopoverContent.new { "Content" }
+#     end
+#   end
 class UI::Popover < Phlex::HTML
   include UI::PopoverBehavior
 
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
   # @param placement [String] Placement of the popover (e.g., "bottom", "top-start")
   # @param offset [Integer] Distance in pixels from the trigger
   # @param trigger [String] Trigger type ("click" or "hover")
@@ -24,6 +37,7 @@ class UI::Popover < Phlex::HTML
   # @param classes [String] Additional CSS classes to merge
   # @param attributes [Hash] Additional HTML attributes
   def initialize(
+    as_child: false,
     placement: "bottom",
     offset: 4,
     trigger: "click",
@@ -33,6 +47,7 @@ class UI::Popover < Phlex::HTML
     side_offset: nil,
     **attributes
   )
+    @as_child = as_child
     @placement = placement
     @offset = side_offset || offset
     @trigger = trigger
@@ -43,6 +58,16 @@ class UI::Popover < Phlex::HTML
   end
 
   def view_template(&block)
-    div(**popover_html_attributes, &block)
+    popover_attrs = popover_html_attributes.deep_merge(@attributes)
+
+    if @as_child
+      # Yield data attributes to block - child receives controller setup
+      yield(popover_attrs) if block_given?
+    else
+      # Default: render wrapper div with controller
+      div(**popover_attrs) do
+        yield if block_given?
+      end
+    end
   end
 end

data/app/components/ui/select.rb

@@ -29,14 +29,26 @@ class UI::Select < Phlex::HTML
 
   # @param value [String] Currently selected value
   # @param classes [String] Additional CSS classes to merge
+  # @param as_child [Boolean] If true, renders without wrapper div but preserves controller on inner element
   # @param attributes [Hash] Additional HTML attributes
-  def initialize(value: nil, classes: "", **attributes)
+  def initialize(value: nil, classes: "", as_child: false, **attributes)
     @value = value
     @classes = classes
+    @as_child = as_child
     @attributes = attributes
   end
 
   def view_template(&block)
-    div(**select_html_attributes.deep_merge(@attributes), &block)
+    select_attrs = select_html_attributes.deep_merge(@attributes)
+
+    if @as_child
+      # When as_child, we still need a wrapper for the Stimulus controller
+      # but we use a minimal inline wrapper that doesn't break flex layouts
+      # Override class to use 'contents' which makes the element invisible to layout
+      select_attrs[:class] = "contents"
+      span(**select_attrs, &block)
+    else
+      div(**select_attrs, &block)
+    end
   end
 end

data/app/components/ui/sonner_toaster.rb

@@ -14,7 +14,7 @@
 #     close_button: true
 #   ) %>
 class UI::SonnerToaster < Phlex::HTML
-  include UI::ToasterBehavior
+  include UI::SonnerToasterBehavior
 
   # @param position [String] Toast position (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
   # @param theme [String] Theme (light, dark, system)

data/app/components/ui/table.rb

@@ -16,30 +16,30 @@ class UI::Table < Phlex::HTML
 
   # DSL methods
   def header(classes: "", **attributes, &block)
-    render Header.new(classes: classes, **attributes, &block)
+    render UI::TableHeader.new(classes: classes, **attributes, &block)
   end
 
   def body(classes: "", **attributes, &block)
-    render Body.new(classes: classes, **attributes, &block)
+    render UI::TableBody.new(classes: classes, **attributes, &block)
   end
 
   def footer(classes: "", **attributes, &block)
-    render Footer.new(classes: classes, **attributes, &block)
+    render UI::TableFooter.new(classes: classes, **attributes, &block)
   end
 
   def caption(classes: "", **attributes, &block)
-    render Caption.new(classes: classes, **attributes, &block)
+    render UI::TableCaption.new(classes: classes, **attributes, &block)
   end
 
   def row(classes: "", **attributes, &block)
-    render Row.new(classes: classes, **attributes, &block)
+    render UI::TableRow.new(classes: classes, **attributes, &block)
   end
 
   def head(classes: "", **attributes, &block)
-    render Head.new(classes: classes, **attributes, &block)
+    render UI::TableHead.new(classes: classes, **attributes, &block)
   end
 
   def cell(classes: "", **attributes, &block)
-    render Cell.new(classes: classes, **attributes, &block)
+    render UI::TableCell.new(classes: classes, **attributes, &block)
   end
 end

data/app/components/ui/table_body.rb

@@ -16,14 +16,14 @@ class UI::TableBody < Phlex::HTML
 
   # DSL methods
   def row(classes: "", **attributes, &block)
-    render Row.new(classes: classes, **attributes, &block)
+    render UI::TableRow.new(classes: classes, **attributes, &block)
   end
 
   def head(classes: "", **attributes, &block)
-    render Head.new(classes: classes, **attributes, &block)
+    render UI::TableHead.new(classes: classes, **attributes, &block)
   end
 
   def cell(classes: "", **attributes, &block)
-    render Cell.new(classes: classes, **attributes, &block)
+    render UI::TableCell.new(classes: classes, **attributes, &block)
   end
 end

data/app/components/ui/table_footer.rb

@@ -16,14 +16,14 @@ class UI::TableFooter < Phlex::HTML
 
   # DSL methods
   def row(classes: "", **attributes, &block)
-    render Row.new(classes: classes, **attributes, &block)
+    render UI::TableRow.new(classes: classes, **attributes, &block)
   end
 
   def head(classes: "", **attributes, &block)
-    render Head.new(classes: classes, **attributes, &block)
+    render UI::TableHead.new(classes: classes, **attributes, &block)
   end
 
   def cell(classes: "", **attributes, &block)
-    render Cell.new(classes: classes, **attributes, &block)
+    render UI::TableCell.new(classes: classes, **attributes, &block)
   end
 end

data/app/components/ui/table_header.rb

@@ -16,14 +16,14 @@ class UI::TableHeader < Phlex::HTML
 
   # DSL methods
   def row(classes: "", **attributes, &block)
-    render Row.new(classes: classes, **attributes, &block)
+    render UI::TableRow.new(classes: classes, **attributes, &block)
   end
 
   def head(classes: "", **attributes, &block)
-    render Head.new(classes: classes, **attributes, &block)
+    render UI::TableHead.new(classes: classes, **attributes, &block)
   end
 
   def cell(classes: "", **attributes, &block)
-    render Cell.new(classes: classes, **attributes, &block)
+    render UI::TableCell.new(classes: classes, **attributes, &block)
   end
 end

data/app/components/ui/table_row.rb

@@ -16,10 +16,10 @@ class UI::TableRow < Phlex::HTML
 
   # DSL methods
   def head(classes: "", **attributes, &block)
-    render Head.new(classes: classes, **attributes, &block)
+    render UI::TableHead.new(classes: classes, **attributes, &block)
   end
 
   def cell(classes: "", **attributes, &block)
-    render Cell.new(classes: classes, **attributes, &block)
+    render UI::TableCell.new(classes: classes, **attributes, &block)
   end
 end

data/app/components/ui/toggle_group.rb

@@ -41,7 +41,8 @@ class UI::ToggleGroup < Phlex::HTML
 
   def view_template(&block)
     div(**toggle_group_html_attributes.deep_merge(@attributes)) do
-      # Store context for child items to access
+      # Store context for child items to access via thread-local
+      # This works across both Phlex internal render and Rails render calls
       @context = {
         variant: @variant,
         size: @size,
@@ -49,7 +50,12 @@ class UI::ToggleGroup < Phlex::HTML
         spacing: @spacing,
         value: @value
       }
-      yield if block_given?
+      Thread.current[:ui_toggle_group_context] = @context
+      begin
+        yield if block_given?
+      ensure
+        Thread.current[:ui_toggle_group_context] = nil
+      end
     end
   end
 

data/app/components/ui/toggle_group_item.rb

@@ -37,9 +37,10 @@ class UI::ToggleGroupItem < Phlex::HTML
   end
 
   def before_template
-    # Try to inherit from parent ToggleGroup context
-    if helpers.respond_to?(:current_component) && helpers.current_component.respond_to?(:context)
-      parent_context = helpers.current_component.context
+    # Try to inherit from parent ToggleGroup context using thread-local
+    # This works across both Phlex internal render and Rails render calls
+    parent_context = Thread.current[:ui_toggle_group_context]
+    if parent_context
       @variant ||= parent_context[:variant]
       @size ||= parent_context[:size]
       @group_type = parent_context[:type]

data/app/components/ui/tooltip.rb

@@ -4,6 +4,8 @@
 #
 # Root container for tooltip. Manages tooltip state via Stimulus controller.
 #
+# Supports asChild pattern for composition without wrapper elements.
+#
 # @example Basic usage
 #   render UI::Tooltip.new do
 #     render UI::Trigger.new { "Hover me" }
@@ -17,15 +19,37 @@
 #     end
 #     render UI::Content.new { "Tooltip text" }
 #   end
+#
+# @example With asChild - pass attributes to custom element
+#   render UI::Tooltip.new(as_child: true) do |tooltip_attrs|
+#     render UI::InputGroupAddon.new(**tooltip_attrs) do
+#       render UI::TooltipTrigger.new(as_child: true) do |trigger_attrs|
+#         render UI::InputGroupButton.new(**trigger_attrs) { "Info" }
+#       end
+#       render UI::TooltipContent.new { "Content" }
+#     end
+#   end
 class UI::Tooltip < Phlex::HTML
   include UI::TooltipBehavior
 
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
   # @param attributes [Hash] Additional HTML attributes
-  def initialize(**attributes)
+  def initialize(as_child: false, **attributes)
+    @as_child = as_child
     @attributes = attributes
   end
 
   def view_template(&block)
-    div(**tooltip_html_attributes.deep_merge(@attributes), &block)
+    tooltip_attrs = tooltip_html_attributes.deep_merge(@attributes)
+
+    if @as_child
+      # Yield data attributes to block - child receives controller setup
+      yield(tooltip_attrs) if block_given?
+    else
+      # Default: render wrapper div with controller
+      div(**tooltip_attrs) do
+        yield if block_given?
+      end
+    end
   end
 end

data/app/helpers/ui/popover_behavior.rb

@@ -8,10 +8,13 @@ module UI::PopoverBehavior
   # Returns HTML attributes for the popover container element
   def popover_html_attributes
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    user_data = attributes_value[:data] || {}
+    other_attributes = attributes_value.except(:data)
+
     {
       class: popover_classes,
-      data: popover_data_attributes
-    }.merge(attributes_value)
+      data: popover_data_attributes.merge(user_data)
+    }.merge(other_attributes)
   end
 
   # Returns combined CSS classes for the popover

data/app/javascript/ui/controllers/collapsible_controller.js

@@ -45,6 +45,8 @@ export default class extends Controller {
       if (isOpen) {
         // Opening: remove hidden and set height
         content.removeAttribute("hidden")
+        // Force reflow to get correct scrollHeight after removing hidden
+        void content.offsetHeight
         content.style.height = `${content.scrollHeight}px`
       } else {
         // Closing: animate to 0, then add hidden after transition

data/app/javascript/ui/controllers/dropdown_controller.js

@@ -82,17 +82,14 @@ export default class extends Controller {
     const trigger = event.currentTarget
     const submenu = trigger.nextElementSibling
 
-    // Remove DOM focus from currently focused element to clear :focus pseudo-class
-    if (document.activeElement && document.activeElement.hasAttribute('role') &&
-        document.activeElement.getAttribute('role') === 'menuitem') {
-      document.activeElement.blur()
-    }
-
     // Remove keyboard focus from all items, except this one
     clearAllTabindexes(this.element)
 
-    // Set tabindex="0" on the hovered trigger
+    // Set tabindex="0" on the hovered trigger and focus it
+    // Focusing the new item instead of blurring the old one keeps focus inside
+    // the dropdown, preventing handleFocusOut from closing the menu
     trigger.setAttribute('tabindex', '0')
+    trigger.focus()
 
     // Track the hovered item for keyboard navigation continuity
     this.lastHoveredItem = trigger
@@ -147,17 +144,14 @@ export default class extends Controller {
   trackHoveredItem(event) {
     const item = event.currentTarget
 
-    // Remove DOM focus from currently focused element to clear :focus pseudo-class
-    if (document.activeElement && document.activeElement.hasAttribute('role') &&
-        document.activeElement.getAttribute('role') === 'menuitem') {
-      document.activeElement.blur()
-    }
-
     // Remove keyboard focus from all items, except this one
     clearAllTabindexes(this.element)
 
-    // Set tabindex="0" on the hovered item
+    // Set tabindex="0" on the hovered item and focus it
+    // Focusing the new item instead of blurring the old one keeps focus inside
+    // the dropdown, preventing handleFocusOut from closing the menu
     item.setAttribute('tabindex', '0')
+    item.focus()
 
     // Track the hovered item for keyboard navigation continuity
     this.lastHoveredItem = item

data/app/view_components/ui/calendar_component.rb

@@ -121,6 +121,14 @@ class UI::CalendarComponent < ViewComponent::Base
   end
 
   def dropdowns_html
+    if use_native_select?
+      native_dropdowns_html
+    else
+      ui_select_dropdowns_html
+    end
+  end
+
+  def native_dropdowns_html
     content_tag(:div, class: "flex items-center gap-1") do
       safe_join([month_select_html, year_select_html])
     end
@@ -143,6 +151,60 @@ class UI::CalendarComponent < ViewComponent::Base
     end
   end
 
+  def ui_select_dropdowns_html
+    content_tag(:div, class: "flex items-center gap-1 px-8 flex-1") do
+      safe_join([
+        ui_month_select_html,
+        ui_year_select_html
+      ])
+    end
+  end
+
+  def ui_month_select_html
+    render(UI::SelectComponent.new(classes: "flex-1", value: (@month.month - 1).to_s)) do
+      safe_join([
+        render(UI::SelectTriggerComponent.new(classes: "h-9 w-full gap-1 px-2 text-sm font-medium border-0 shadow-none")),
+        render(UI::SelectContentComponent.new(classes: "min-w-[8rem]")) {
+          safe_join(Date::MONTHNAMES.compact.each_with_index.map { |name, i|
+            render(UI::SelectItemComponent.new(value: i.to_s)) { name }
+          })
+        },
+        tag.input(
+          type: "hidden",
+          value: (@month.month - 1).to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "monthSelect",
+            action: "change->ui--calendar#goToMonth"
+          }
+        )
+      ])
+    end
+  end
+
+  def ui_year_select_html
+    current_year = Date.today.year
+    render(UI::SelectComponent.new(value: @month.year.to_s)) do
+      safe_join([
+        render(UI::SelectTriggerComponent.new(classes: "min-w-[75px] h-9 w-auto gap-1 px-2 text-sm font-medium border-0 shadow-none")),
+        render(UI::SelectContentComponent.new(classes: "min-w-[5rem] max-h-[200px]")) {
+          safe_join(((current_year - @year_range)..(current_year + 10)).map { |y|
+            render(UI::SelectItemComponent.new(value: y.to_s)) { y.to_s }
+          })
+        },
+        tag.input(
+          type: "hidden",
+          value: @month.year.to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "yearSelect",
+            action: "change->ui--calendar#goToYear"
+          }
+        )
+      ])
+    end
+  end
+
   def table_html
     content_tag(:table, class: "w-full border-collapse space-y-1", role: "grid") do
       safe_join([

data/app/view_components/ui/dropdown_menu_trigger_component.rb

@@ -4,47 +4,31 @@
 class UI::DropdownMenuTriggerComponent < ViewComponent::Base
   include UI::DropdownMenuTriggerBehavior
 
+  renders_one :trigger_content
+
   def initialize(as_child: false, classes: "", **attributes)
     @as_child = as_child
     @classes = classes
     @attributes = attributes
   end
 
+  # Returns trigger attributes for as_child mode
+  def trigger_attrs
+    attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
+    # When as_child is true, only pass functional attributes (data, aria, tabindex, role)
+    # The child component handles its own styling (following shadcn pattern)
+    attrs.except(:class)
+  end
+
   def call
-    trigger_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
+    all_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
 
     if @as_child
-      # asChild mode: merge attributes into child element
-      rendered = content.to_s
-      doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
-      first_element = doc.children.find { |node| node.element? }
-
-      if first_element
-        # Merge data attributes (convert Rails naming to HTML)
-        trigger_attrs.fetch(:data, {}).each do |key, value|
-          html_key = key.to_s.gsub("__", "--").tr("_", "-")
-          first_element["data-#{html_key}"] = value
-        end
-
-        # Merge CSS classes with TailwindMerge
-        if trigger_attrs[:class]
-          existing_classes = first_element["class"] || ""
-          merged_classes = TailwindMerge::Merger.new.merge([existing_classes, trigger_attrs[:class]].join(" "))
-          first_element["class"] = merged_classes
-        end
-
-        # Merge other attributes (except data and class)
-        trigger_attrs.except(:data, :class).each do |key, value|
-          first_element[key.to_s] = value
-        end
-
-        doc.to_html.html_safe
-      else
-        content
-      end
+      # asChild mode: yield attributes to block, child handles rendering
+      content
     else
       # Default mode: render as div
-      content_tag :div, **trigger_attrs do
+      content_tag :div, **all_attrs do
         content
       end
     end

data/app/view_components/ui/input_group_button_component.rb

@@ -31,6 +31,21 @@ class UI::InputGroupButtonComponent < ViewComponent::Base
   end
 
   def call
-    render partial: "ui/button", locals: input_group_button_attributes.merge(content: content)
+    # Get base attributes from behavior (type, variant, classes)
+    base_attrs = input_group_button_attributes
+
+    # Extract button-specific params that ui/button accepts as direct arguments
+    button_params = {
+      type: base_attrs[:type],
+      variant: base_attrs[:variant],
+      classes: base_attrs[:classes],
+      content: content
+    }
+
+    # Merge additional HTML attributes (data, role, aria, tabindex, etc.) into attributes hash
+    html_attrs = base_attrs.except(:type, :variant, :classes, :"data-size")
+    button_params[:attributes] = html_attrs unless html_attrs.empty?
+
+    render partial: "ui/button", locals: button_params
   end
 end

data/app/view_components/ui/navigation_menu_content_component.rb

@@ -4,7 +4,7 @@
 #
 # Container for navigation menu content that appears when trigger is activated.
 class UI::NavigationMenuContentComponent < ViewComponent::Base
-  include UI::ContentBehavior
+  include UI::NavigationMenuContentBehavior
 
   # @param viewport [Boolean] Whether content should be rendered in viewport
   # @param classes [String] Additional CSS classes to merge

data/app/view_components/ui/navigation_menu_item_component.rb

@@ -4,7 +4,7 @@
 #
 # Wrapper for individual navigation menu item.
 class UI::NavigationMenuItemComponent < ViewComponent::Base
-  include UI::ItemBehavior
+  include UI::NavigationMenuItemBehavior
 
   # @param value [String] Optional value for controlled state
   # @param classes [String] Additional CSS classes to merge

data/app/view_components/ui/navigation_menu_link_component.rb

@@ -21,7 +21,7 @@ require "nokogiri"
 #     <%= link_to "About", about_path %>
 #   <% end %>
 class UI::NavigationMenuLinkComponent < ViewComponent::Base
-  include UI::LinkBehavior
+  include UI::NavigationMenuLinkBehavior
   include UI::SharedAsChildBehavior
 
   # @param href [String] URL for the link (ignored when as_child: true)

data/app/view_components/ui/navigation_menu_list_component.rb

@@ -4,7 +4,7 @@
 #
 # Container for navigation menu items.
 class UI::NavigationMenuListComponent < ViewComponent::Base
-  include UI::ListBehavior
+  include UI::NavigationMenuListBehavior
 
   # @param classes [String] Additional CSS classes to merge
   # @param attributes [Hash] Additional HTML attributes