fernandes-ui 0.1.2 → 0.1.4

data/app/view_components/ui/popover_component.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::PopoverComponent.new do %>
 #     <%= render UI::TriggerComponent.new do %>
@@ -15,13 +17,19 @@
 #     <% end %>
 #   <% end %>
 #
-# @example With custom placement
-#   <%= render UI::PopoverComponent.new(placement: "top", offset: 8) do %>
-#     ...
+# @example With asChild - pass attributes to custom element
+#   <%= render UI::PopoverComponent.new(as_child: true) do |popover| %>
+#     <%= render UI::InputGroupAddonComponent.new(**popover.popover_attrs) do %>
+#       <%= render UI::PopoverTriggerComponent.new(as_child: true) do |trigger| %>
+#         <%= render UI::InputGroupButtonComponent.new(**trigger.trigger_attrs) { "Info" } %>
+#       <% end %>
+#       <%= render UI::PopoverContentComponent.new { "Content" } %>
+#     <% end %>
 #   <% end %>
 class UI::PopoverComponent < ViewComponent::Base
   include UI::PopoverBehavior
 
+  # @param as_child [Boolean] When true, yields self to block for attribute access
   # @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")
@@ -29,6 +37,7 @@ class UI::PopoverComponent < ViewComponent::Base
   # @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",
@@ -38,6 +47,7 @@ class UI::PopoverComponent < ViewComponent::Base
     side_offset: nil,
     **attributes
   )
+    @as_child = as_child
     @placement = placement
     @offset = side_offset || offset
     @trigger = trigger
@@ -47,9 +57,20 @@ class UI::PopoverComponent < ViewComponent::Base
     @attributes = attributes
   end
 
+  # Returns popover attributes for as_child mode
+  def popover_attrs
+    popover_html_attributes.deep_merge(@attributes)
+  end
+
   def call
-    content_tag :div, **popover_html_attributes do
+    if @as_child
+      # asChild mode: yield self to block, child accesses popover_attrs
       content
+    else
+      # Default: render wrapper div with controller
+      content_tag :div, **popover_html_attributes do
+        content
+      end
     end
   end
 end

data/app/view_components/ui/popover_trigger_component.rb

@@ -26,6 +26,11 @@ class UI::PopoverTriggerComponent < ViewComponent::Base
     @attributes = attributes
   end
 
+  # Returns trigger attributes for as_child mode
+  def trigger_attrs
+    popover_trigger_html_attributes.deep_merge(@attributes)
+  end
+
   def call
     trigger_attrs = popover_trigger_html_attributes.deep_merge(@attributes)
 

data/app/view_components/ui/select_component.rb

@@ -18,14 +18,25 @@ class UI::SelectComponent < ViewComponent::Base
 
   # @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 call
-    content_tag :div, content, **select_html_attributes.deep_merge(@attributes)
+    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
+      attrs[:class] = "contents"
+      content_tag :span, content, **attrs
+    else
+      content_tag :div, content, **attrs
+    end
   end
 end

data/app/view_components/ui/table_body_component.rb

@@ -3,7 +3,7 @@
 class UI::TableBodyComponent < ViewComponent::Base
   include UI::TableBodyBehavior
 
-  renders_many :rows, RowComponent
+  renders_many :rows, UI::TableRowComponent
 
   # Alias amigável
   alias_method :row, :with_row

data/app/view_components/ui/table_component.rb

@@ -3,10 +3,10 @@
 class UI::TableComponent < ViewComponent::Base
   include UI::TableBehavior
 
-  renders_one :table_header, HeaderComponent
-  renders_one :table_body, BodyComponent
-  renders_one :table_footer, FooterComponent
-  renders_one :table_caption, CaptionComponent
+  renders_one :table_header, UI::TableHeaderComponent
+  renders_one :table_body, UI::TableBodyComponent
+  renders_one :table_footer, UI::TableFooterComponent
+  renders_one :table_caption, UI::TableCaptionComponent
 
   # Aliases amigáveis
   alias_method :header, :with_table_header

data/app/view_components/ui/table_footer_component.rb

@@ -3,7 +3,7 @@
 class UI::TableFooterComponent < ViewComponent::Base
   include UI::TableFooterBehavior
 
-  renders_many :rows, RowComponent
+  renders_many :rows, UI::TableRowComponent
 
   # Alias amigável
   alias_method :row, :with_row

data/app/view_components/ui/table_header_component.rb

@@ -3,7 +3,7 @@
 class UI::TableHeaderComponent < ViewComponent::Base
   include UI::TableHeaderBehavior
 
-  renders_many :rows, RowComponent
+  renders_many :rows, UI::TableRowComponent
 
   # Alias amigável
   alias_method :row, :with_row

data/app/view_components/ui/table_row_component.rb

@@ -3,8 +3,8 @@
 class UI::TableRowComponent < ViewComponent::Base
   include UI::TableRowBehavior
 
-  renders_many :heads, HeadComponent
-  renders_many :cells, CellComponent
+  renders_many :heads, UI::TableHeadComponent
+  renders_many :cells, UI::TableCellComponent
 
   # Aliases amigáveis
   alias_method :head, :with_head

data/app/view_components/ui/tooltip_component.rb

@@ -3,17 +3,48 @@
 # TooltipComponent - ViewComponent implementation
 #
 # Root container for tooltip. Manages tooltip state via Stimulus controller.
+#
+# Supports asChild pattern for composition without wrapper elements.
+#
+# @example Basic usage
+#   <%= render UI::TooltipComponent.new do %>
+#     <%= render UI::TooltipTriggerComponent.new { "Hover me" } %>
+#     <%= render UI::TooltipContentComponent.new { "Tooltip text" } %>
+#   <% end %>
+#
+# @example With asChild - pass attributes to custom element
+#   <%= render UI::TooltipComponent.new(as_child: true) do |tooltip| %>
+#     <%= render UI::InputGroupAddonComponent.new(**tooltip.tooltip_attrs) do %>
+#       <%= render UI::TooltipTriggerComponent.new(as_child: true) do |trigger| %>
+#         <%= render UI::InputGroupButtonComponent.new(**trigger.trigger_attrs) { "Info" } %>
+#       <% end %>
+#       <%= render UI::TooltipContentComponent.new { "Content" } %>
+#     <% end %>
+#   <% end %>
 class UI::TooltipComponent < ViewComponent::Base
   include UI::TooltipBehavior
 
+  # @param as_child [Boolean] When true, yields self to block for attribute access
   # @param attributes [Hash] Additional HTML attributes
-  def initialize(**attributes)
+  def initialize(as_child: false, **attributes)
+    @as_child = as_child
     @attributes = attributes
   end
 
+  # Returns tooltip attributes for as_child mode
+  def tooltip_attrs
+    tooltip_html_attributes.deep_merge(@attributes)
+  end
+
   def call
-    content_tag :div, **tooltip_html_attributes.merge(@attributes.except(:data)) do
+    if @as_child
+      # asChild mode: yield self to block, child accesses tooltip_attrs
       content
+    else
+      # Default: render wrapper div with controller
+      content_tag :div, **tooltip_html_attributes.merge(@attributes.except(:data)) do
+        content
+      end
     end
   end
 end

data/app/view_components/ui/tooltip_trigger_component.rb

@@ -4,6 +4,18 @@
 #
 # The interactive element that shows/hides the tooltip on hover/focus.
 # Supports asChild pattern for composition with other components.
+#
+# @example Basic usage
+#   <%= render UI::TooltipTriggerComponent.new do %>
+#     Hover me
+#   <% end %>
+#
+# @example As child (yields attributes to block)
+#   <%= render UI::TooltipTriggerComponent.new(as_child: true) do |trigger| %>
+#     <%= render UI::InputGroupButtonComponent.new(**trigger.trigger_attrs) do %>
+#       Info
+#     <% end %>
+#   <% end %>
 class UI::TooltipTriggerComponent < ViewComponent::Base
   include UI::TooltipTriggerBehavior
 
@@ -14,12 +26,20 @@ class UI::TooltipTriggerComponent < ViewComponent::Base
     @attributes = attributes
   end
 
-  def call
-    trigger_attrs = tooltip_trigger_html_attributes.merge(@attributes.except(:data))
+  # Returns trigger attributes for as_child mode
+  def trigger_attrs
+    tooltip_trigger_html_attributes.deep_merge(@attributes)
+  end
 
-    # Default mode: render as button with proper styling
-    content_tag :button, **trigger_attrs do
+  def call
+    if @as_child
+      # asChild mode: yield self so caller can access trigger_attrs
       content
+    else
+      # Default mode: render as button with proper styling
+      content_tag :button, **trigger_attrs do
+        content
+      end
     end
   end
 end

data/app/views/ui/_avatar.html.erb

@@ -1,13 +1,17 @@
 <%
-  classes ||= ""
+  # Avatar - ERB Partial
+  #
+  # Displays an image element with a fallback for representing users.
+  #
+  # @param classes [String] Additional CSS classes to merge
+
+  @classes = local_assigns.fetch(:classes, "")
 
   # Include behavior module
   extend UI::AvatarBehavior
 
   # Get HTML attributes from behavior
   attrs = avatar_html_attributes
-  all_classes = attrs[:class]
-  data_attrs = attrs[:data]
-%><span class="<%= all_classes %>" data-controller="<%= data_attrs[:controller] %>" data-slot="<%= data_attrs[:slot] %>">
+%><span class="<%= attrs[:class] %>" data-controller="<%= attrs[:data][:controller] %>" data-slot="<%= attrs[:data][:slot] %>">
   <%= yield %>
 </span>

data/app/views/ui/_button.html.erb

@@ -11,6 +11,9 @@
   # @param disabled [Boolean] Whether the button is disabled
   # @param classes [String] Additional CSS classes to merge
   # @param attributes [Hash] Additional HTML attributes
+  #
+  # Supports splatting attributes from parent components (e.g., **trigger_attrs)
+  # When attributes are splatted, data/class/id are merged from local_assigns
 
   @variant = local_assigns.fetch(:variant, "default")
   @size = local_assigns.fetch(:size, "default")
@@ -20,6 +23,19 @@
   @attributes = local_assigns.fetch(:attributes, {})
   content_param = local_assigns.fetch(:content, nil)
 
+  # Support for splatted attributes (e.g., **trigger_attrs)
+  # Merge data and class from local_assigns if present (from splatting)
+  splatted_data = local_assigns.fetch(:data, {})
+  splatted_class = local_assigns.fetch(:class, nil)
+
+  # Merge splatted attributes into @attributes
+  if splatted_data.present?
+    @attributes = @attributes.deep_merge(data: splatted_data)
+  end
+  if splatted_class.present?
+    @attributes[:class] = TailwindMerge::Merger.new.merge([@attributes[:class], splatted_class].compact.join(" "))
+  end
+
   extend UI::ButtonBehavior
   base_attrs = button_html_attributes
 

data/app/views/ui/_date_picker.html.erb

@@ -61,14 +61,14 @@
 -%>
 <%= content_tag :div, all_attributes do %>
   <% if @label %>
-    <%= render "ui/label/label", content: @label, for: @label_for, classes: "px-1" %>
+    <%= render "ui/label", content: @label, for: @label_for, classes: "px-1" %>
   <% end %>
 
-  <%= render "ui/popover/popover", trigger: "click", placement: "bottom-start", offset: 4 do %>
+  <%= render "ui/popover", trigger: "click", placement: "bottom-start", offset: 4 do %>
     <%= yield %>
 
-    <%= render "ui/popover/popover_content", classes: "w-auto overflow-hidden p-0" do %>
-      <%= render "ui/calendar/calendar",
+    <%= render "ui/popover/content", classes: "w-auto overflow-hidden p-0" do %>
+      <%= render "ui/calendar",
         mode: @mode,
         selected: @selected,
         locale: @locale,

data/app/views/ui/_popover.html.erb

@@ -1,19 +1,45 @@
 <%# Popover Component - Container for popover trigger and content %>
+<%#
+  Supports asChild pattern for composition without wrapper elements.
+
+  @example Basic usage
+    render "ui/popover" do
+      render "ui/popover/trigger" { "Open" }
+      render "ui/popover/content" { "Content" }
+    end
+
+  @example With asChild (no wrapper div)
+    render "ui/popover", as_child: true do |popover_attrs|
+      render "ui/input_group/addon", attributes: popover_attrs do
+        render "ui/popover/trigger", as_child: true do |trigger_attrs|
+          ...
+        end
+        render "ui/popover/content" { "Content" }
+      end
+    end
+%>
 <%
+  @as_child = local_assigns.fetch(:as_child, false)
   @trigger = local_assigns.fetch(:trigger, "click")
   @placement = local_assigns.fetch(:placement, "bottom")
-  @offset = local_assigns.fetch(:offset, 8)
+  @offset = local_assigns.fetch(:offset, 4)
   @hover_delay = local_assigns.fetch(:hover_delay, 0)
   @align = local_assigns.fetch(:align, nil)
   @classes = local_assigns.fetch(:classes, "")
   @attributes = local_assigns.fetch(:attributes, {})
+  @data = local_assigns.fetch(:data, {})
 
   # Extend behavior for shared logic
   extend UI::PopoverBehavior
 
-  # Get HTML attributes from behavior
+  # Get HTML attributes from behavior and deep merge with passed data and attributes
   all_attributes = popover_html_attributes.deep_merge(@attributes)
+  all_attributes[:data] = (all_attributes[:data] || {}).merge(@data) if @data.present?
 -%>
-<%= content_tag :div, all_attributes do %>
-  <%= yield %>
+<% if @as_child %>
+  <%= yield(all_attributes) %>
+<% else %>
+  <%= content_tag :div, all_attributes do %>
+    <%= yield %>
+  <% end %>
 <% end %>

data/app/views/ui/_select.html.erb

@@ -4,6 +4,7 @@
   @attributes = local_assigns.fetch(:attributes, {})
   @value = local_assigns.fetch(:value, nil)
   @id = local_assigns.fetch(:id, nil)
+  as_child = local_assigns.fetch(:as_child, false)
 
   # Extend behavior for shared logic
   extend ::UI::SelectBehavior
@@ -12,6 +13,16 @@
   all_attributes = select_html_attributes.deep_merge(@attributes)
   all_attributes[:id] = @id if @id.present?
 -%>
-<%= content_tag :div, all_attributes do %>
-  <%= yield %>
+<% 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 %>
+  <% all_attributes[:class] = "contents" %>
+  <%= content_tag :span, all_attributes do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <%= content_tag :div, all_attributes do %>
+    <%= yield %>
+  <% end %>
 <% end %>

data/app/views/ui/_skeleton.html.erb

@@ -13,7 +13,7 @@ html_class = local_assigns.fetch(:class, "")
 attributes = local_assigns.except(:class)
 
 default_classes = "bg-accent animate-pulse rounded-md"
-merged_classes = [default_classes, html_class].compact_blank.join(" ")
+merged_classes = TailwindMerge::Merger.new.merge([default_classes, html_class].compact_blank.join(" "))
 %>
 
 <div data-slot="skeleton" class="<%= merged_classes %>" <%= attributes.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>></div>

data/app/views/ui/_tooltip.html.erb

@@ -1,5 +1,27 @@
 <%# Tooltip Component - Root container for tooltip %>
+<%#
+  Supports asChild pattern for composition without wrapper elements.
+
+  @example Basic usage
+    render "ui/tooltip" do
+      render "ui/tooltip/trigger" { "Hover me" }
+      render "ui/tooltip/content" { "Tooltip text" }
+    end
+
+  @example With asChild (no wrapper div)
+    render "ui/tooltip", as_child: true do |tooltip_attrs|
+      render "ui/input_group/addon", attributes: tooltip_attrs do
+        render "ui/tooltip/trigger", as_child: true do |trigger_attrs|
+          render "ui/input_group/button", attributes: trigger_attrs do
+            "Info"
+          end
+        end
+        render "ui/tooltip/content" { "Content" }
+      end
+    end
+%>
 <%
+  @as_child = local_assigns.fetch(:as_child, false)
   @attributes = local_assigns.fetch(:attributes, {})
 
   # Extend behavior for shared logic
@@ -8,6 +30,10 @@
   # Get HTML attributes from behavior
   all_attributes = tooltip_html_attributes.deep_merge(@attributes)
 -%>
-<%= content_tag :div, all_attributes do %>
-  <%= yield %>
+<% if @as_child %>
+  <%= yield(all_attributes) %>
+<% else %>
+  <%= content_tag :div, all_attributes do %>
+    <%= yield %>
+  <% end %>
 <% end %>

data/app/views/ui/dropdown_menu/_trigger.html.erb

@@ -12,7 +12,9 @@
   all_attributes = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
 -%>
 <% if as_child %>
-  <%= yield(all_attributes) %>
+  <%# When as_child is true, only pass functional attributes (data, aria, tabindex, role)
+      The child component handles its own styling (following shadcn pattern) %>
+  <%= yield(all_attributes.except(:class)) %>
 <% else %>
   <%= content_tag :div, all_attributes do %>
     <%= content || yield %>

data/app/views/ui/input_group/_button.html.erb

@@ -10,9 +10,20 @@
   # Extend behavior for shared logic
   extend UI::InputGroupButtonBehavior
 
-  # Get HTML attributes from behavior
-  all_attributes = input_group_button_html_attributes.deep_merge(@attributes)
+  # 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]
+  }
+
+  # Merge additional HTML attributes (data, role, aria, tabindex, etc.) into attributes hash
+  html_attrs = @attributes.except(:type, :variant, :classes)
+  button_params[:attributes] = html_attrs unless html_attrs.empty?
 -%>
-<%= render "ui/button", **all_attributes do %>
+<%= render "ui/button", **button_params do %>
   <%= content || yield %>
 <% end %>

data/app/views/ui/popover/_trigger.html.erb

@@ -1,6 +1,22 @@
 <%# Popover Trigger - Button or element that triggers the popover %>
+<%#
+  Supports asChild pattern for composition without wrapper elements.
+
+  @example Basic usage
+    render "ui/popover/trigger" do
+      button { "Click me" }
+    end
+
+  @example With asChild
+    render "ui/popover/trigger", as_child: true do |trigger_attrs|
+      render "ui/input_group/button", attributes: trigger_attrs do
+        "Info"
+      end
+    end
+%>
 <%
   content ||= local_assigns.fetch(:content, nil)
+  as_child = local_assigns.fetch(:as_child, false)
   @classes = local_assigns.fetch(:classes, "")
   @attributes = local_assigns.fetch(:attributes, {})
 
@@ -10,6 +26,10 @@
   # Get HTML attributes from behavior
   all_attributes = popover_trigger_html_attributes.deep_merge(@attributes)
 -%>
-<%= content_tag :div, all_attributes do %>
-  <%= content || yield %>
+<% if as_child %>
+  <%= yield(all_attributes) %>
+<% else %>
+  <%= content_tag :div, all_attributes do %>
+    <%= content || yield %>
+  <% end %>
 <% end %>

data/app/views/ui/tooltip/_trigger.html.erb

@@ -1,4 +1,19 @@
 <%# Tooltip Trigger - Interactive element that shows/hides tooltip %>
+<%#
+  Supports asChild pattern for composition without wrapper elements.
+
+  @example Basic usage
+    render "ui/tooltip/trigger" do
+      "Hover me"
+    end
+
+  @example With asChild
+    render "ui/tooltip/trigger", as_child: true do |trigger_attrs|
+      render "ui/input_group/button", attributes: trigger_attrs do
+        "Info"
+      end
+    end
+%>
 <%
   @as_child = local_assigns.fetch(:as_child, false)
   @attributes = local_assigns.fetch(:attributes, {})
@@ -10,27 +25,7 @@
   trigger_attrs = tooltip_trigger_html_attributes.deep_merge(@attributes)
 -%>
 <% if @as_child %>
-  <%# asChild mode: capture block and inject attributes into first element %>
-  <% captured_content = capture { yield } %>
-  <%= raw captured_content.sub(/(<[a-z][a-z0-9]*)([\s>])/i) do |match|
-    tag_start, tag_end = $1, $2
-
-    # Build attributes string manually
-    attrs_array = trigger_attrs.map do |key, value|
-      if key == :data && value.is_a?(Hash)
-        # Handle data attributes
-        value.map { |k, v| "data-#{k.to_s.dasherize}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ")
-      elsif value.is_a?(TrueClass)
-        key.to_s.dasherize
-      elsif value.is_a?(FalseClass) || value.nil?
-        nil
-      else
-        "#{key.to_s.dasherize}=\"#{ERB::Util.html_escape(value)}\""
-      end
-    end.compact.join(" ")
-
-    "#{tag_start} #{attrs_array}#{tag_end}"
-  end %>
+  <%= yield(trigger_attrs) %>
 <% else %>
   <%# Default mode: render as button %>
   <%= content_tag :button, trigger_attrs do %>

data/lib/ui/version.rb

@@ -1,3 +1,3 @@
 module UI
-  VERSION = "0.1.2"
+  VERSION = "0.1.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fernandes-ui
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.4
 platform: ruby
 authors:
 - Celso Fernandes
@@ -379,6 +379,7 @@ files:
 - app/components/ui/avatar_fallback.rb
 - app/components/ui/avatar_image.rb
 - app/components/ui/badge.rb
+- app/components/ui/base.rb
 - app/components/ui/blockquote.rb
 - app/components/ui/breadcrumb.rb
 - app/components/ui/breadcrumb_ellipsis.rb