fernandes-ui 0.1.1 → 0.1.4

data/app/view_components/ui/toggle_group_item_component.rb

@@ -1,72 +1,72 @@
 # frozen_string_literal: true
 
-    # ItemComponent - ViewComponent implementation
-    #
-    # An individual toggle button within a Toggle Group.
-    # Inherits variant, size, and type from parent ToggleGroup.
-    #
-    # @example Basic usage
-    #   <%= render UI::ItemComponent.new(value: "left") { "Left" } %>
-    #
-    # @example With icon
-    #   <%= render UI::ItemComponent.new(value: "bold") do %>
-    #     <%= icon("bold") %>
-    #   <% end %>
-    class UI::ToggleGroupItemComponent < ViewComponent::Base
-      include UI::ToggleGroupItemBehavior
+# ItemComponent - ViewComponent implementation
+#
+# An individual toggle button within a Toggle Group.
+# Inherits variant, size, and type from parent ToggleGroup.
+#
+# @example Basic usage
+#   <%= render UI::ItemComponent.new(value: "left") { "Left" } %>
+#
+# @example With icon
+#   <%= render UI::ItemComponent.new(value: "bold") do %>
+#     <%= icon("bold") %>
+#   <% end %>
+class UI::ToggleGroupItemComponent < ViewComponent::Base
+  include UI::ToggleGroupItemBehavior
 
-      # @param value [String] Unique identifier for this item (required)
-      # @param variant [String] Visual style variant (inherits from parent if not specified)
-      # @param size [String] Size variant (inherits from parent if not specified)
-      # @param pressed [Boolean] Whether the item is pressed/active
-      # @param disabled [Boolean] Whether the item is disabled
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(value:, variant: nil, size: nil, pressed: false, disabled: false, classes: "", **attributes)
-        @value = value
-        @variant = variant
-        @size = size
-        @pressed = pressed
-        @disabled = disabled
-        @classes = classes
-        @attributes = attributes
+  # @param value [String] Unique identifier for this item (required)
+  # @param variant [String] Visual style variant (inherits from parent if not specified)
+  # @param size [String] Size variant (inherits from parent if not specified)
+  # @param pressed [Boolean] Whether the item is pressed/active
+  # @param disabled [Boolean] Whether the item is disabled
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(value:, variant: nil, size: nil, pressed: false, disabled: false, classes: "", **attributes)
+    @value = value
+    @variant = variant
+    @size = size
+    @pressed = pressed
+    @disabled = disabled
+    @classes = classes
+    @attributes = attributes
 
-        # These will be set from parent context if available
-        @group_type = nil
-        @spacing = nil
-      end
+    # These will be set from parent context if available
+    @group_type = nil
+    @spacing = nil
+  end
 
-      def before_render
-        # Try to inherit from parent ToggleGroup context
-        if helpers.instance_variable_defined?(:@toggle_group_context)
-          parent_context = helpers.instance_variable_get(:@toggle_group_context)
-          @variant ||= parent_context[:variant]
-          @size ||= parent_context[:size]
-          @group_type = parent_context[:type]
-          @spacing = parent_context[:spacing]
+  def before_render
+    # Try to inherit from parent ToggleGroup context
+    if helpers.instance_variable_defined?(:@toggle_group_context)
+      parent_context = helpers.instance_variable_get(:@toggle_group_context)
+      @variant ||= parent_context[:variant]
+      @size ||= parent_context[:size]
+      @group_type = parent_context[:type]
+      @spacing = parent_context[:spacing]
 
-          # Check if this item should be pressed based on parent value
-          parent_value = parent_context[:value]
-          if parent_value
-            @pressed = if @group_type == "multiple"
-              Array(parent_value).include?(@value)
-            else
-              parent_value.to_s == @value.to_s
-            end
-          end
+      # Check if this item should be pressed based on parent value
+      parent_value = parent_context[:value]
+      if parent_value
+        @pressed = if @group_type == "multiple"
+          Array(parent_value).include?(@value)
+        else
+          parent_value.to_s == @value.to_s
         end
-
-        # Fallback defaults
-        @variant ||= "default"
-        @size ||= "default"
-        @group_type ||= "single"
-        @spacing ||= 0
       end
+    end
 
-      def call
-        attrs = toggle_group_item_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+    # Fallback defaults
+    @variant ||= "default"
+    @size ||= "default"
+    @group_type ||= "single"
+    @spacing ||= 0
+  end
 
-        content_tag :button, content, **attrs.merge(@attributes.except(:data))
-      end
-    end
+  def call
+    attrs = toggle_group_item_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+
+    content_tag :button, content, **attrs.merge(@attributes.except(:data))
+  end
+end

data/app/view_components/ui/tooltip_component.rb

@@ -1,19 +1,50 @@
 # frozen_string_literal: true
 
-    # TooltipComponent - ViewComponent implementation
-    #
-    # Root container for tooltip. Manages tooltip state via Stimulus controller.
-    class UI::TooltipComponent < ViewComponent::Base
-      include UI::TooltipBehavior
+# 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 attributes [Hash] Additional HTML attributes
-      def initialize(**attributes)
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields self to block for attribute access
+  # @param attributes [Hash] Additional HTML 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
-          content
-        end
+  def call
+    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_content_component.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # ContentComponent - ViewComponent implementation
-    #
-    # The popup content that displays tooltip information.
-    # Positioned by Floating UI via Stimulus controller.
-    class UI::TooltipContentComponent < ViewComponent::Base
-      include UI::TooltipContentBehavior
+# ContentComponent - ViewComponent implementation
+#
+# The popup content that displays tooltip information.
+# Positioned by Floating UI via Stimulus controller.
+class UI::TooltipContentComponent < ViewComponent::Base
+  include UI::TooltipContentBehavior
 
-      # @param side [String] Preferred side: "top", "right", "bottom", "left"
-      # @param align [String] Alignment: "start", "center", "end"
-      # @param side_offset [Integer] Distance from trigger element in pixels
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(side: "top", align: "center", side_offset: 4, classes: "", **attributes)
-        @side = side
-        @align = align
-        @side_offset = side_offset
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param side [String] Preferred side: "top", "right", "bottom", "left"
+  # @param align [String] Alignment: "start", "center", "end"
+  # @param side_offset [Integer] Distance from trigger element in pixels
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(side: "top", align: "center", side_offset: 4, classes: "", **attributes)
+    @side = side
+    @align = align
+    @side_offset = side_offset
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        content_tag :div, **tooltip_content_html_attributes.merge(@attributes.except(:data)) do
-          content
-        end
-      end
+  def call
+    content_tag :div, **tooltip_content_html_attributes.merge(@attributes.except(:data)) do
+      content
     end
+  end
+end

data/app/view_components/ui/tooltip_trigger_component.rb

@@ -1,25 +1,45 @@
 # frozen_string_literal: true
 
-    # TriggerComponent - ViewComponent implementation
-    #
-    # The interactive element that shows/hides the tooltip on hover/focus.
-    # Supports asChild pattern for composition with other components.
-    class UI::TooltipTriggerComponent < ViewComponent::Base
-      include UI::TooltipTriggerBehavior
+# TriggerComponent - ViewComponent implementation
+#
+# 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
 
-      # @param as_child [Boolean] If true, yields attributes to block instead of rendering button
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, **attributes)
-        @as_child = as_child
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] If true, yields attributes to block instead of rendering button
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, **attributes)
+    @as_child = as_child
+    @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
-          content
-        end
+  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/_command.html.erb

@@ -4,10 +4,12 @@
   # A command palette component for searching and selecting items.
   #
   # @param loop [Boolean] Whether to loop navigation
+  # @param autofocus [Boolean] Whether to focus the input on show (default: false)
   # @param classes [String] Additional CSS classes
   # @param attributes [Hash] Additional HTML attributes
 
   @loop = local_assigns.fetch(:loop, true)
+  @autofocus = local_assigns.fetch(:autofocus, false)
   @classes = local_assigns.fetch(:classes, "")
   @attributes = local_assigns.fetch(: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/carousel/_next.html.erb

@@ -7,7 +7,7 @@
   extend UI::CarouselNextBehavior
   all_attributes = carousel_next_html_attributes
 %>
-<%= render "ui/button", attributes: all_attributes, classes: carousel_next_classes, variant: :ghost, size: :icon do %>
+<%= render "ui/button", attributes: all_attributes, classes: carousel_next_classes, variant: :outline, size: :icon do %>
   <%= lucide_icon("arrow-right", class: "size-4") %>
   <span class="sr-only">Next slide</span>
 <% end %>

data/app/views/ui/carousel/_previous.html.erb

@@ -7,7 +7,7 @@
   extend UI::CarouselPreviousBehavior
   all_attributes = carousel_previous_html_attributes
 %>
-<%= render "ui/button", attributes: all_attributes, classes: carousel_previous_classes, variant: :ghost, size: :icon do %>
+<%= render "ui/button", attributes: all_attributes, classes: carousel_previous_classes, variant: :outline, size: :icon do %>
   <%= lucide_icon("arrow-left", class: "size-4") %>
   <span class="sr-only">Previous slide</span>
 <% 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 %>