fernandes-ui 0.1.1 → 0.1.4

data/app/components/ui/tooltip_trigger.rb

@@ -1,42 +1,42 @@
 # frozen_string_literal: true
 
-    # Trigger - Phlex implementation
-    #
-    # The interactive element that shows/hides the tooltip on hover/focus.
-    # Supports asChild pattern for composition with other components.
-    #
-    # @example Default trigger (renders as button)
-    #   render UI::Trigger.new { "Hover me" }
-    #
-    # @example With asChild - compose with Button
-    #   render UI::Trigger.new(as_child: true) do |attrs|
-    #     render UI::Button.new(**attrs, variant: :outline) { "Hover" }
-    #   end
-    #
-    # @example With asChild - custom element
-    #   render UI::Trigger.new(as_child: true) do |attrs|
-    #     span(**attrs, class: "cursor-help") { "Help" }
-    #   end
-    class UI::TooltipTrigger < Phlex::HTML
-      include UI::TooltipTriggerBehavior
+# Trigger - Phlex implementation
+#
+# The interactive element that shows/hides the tooltip on hover/focus.
+# Supports asChild pattern for composition with other components.
+#
+# @example Default trigger (renders as button)
+#   render UI::Trigger.new { "Hover me" }
+#
+# @example With asChild - compose with Button
+#   render UI::Trigger.new(as_child: true) do |attrs|
+#     render UI::Button.new(**attrs, variant: :outline) { "Hover" }
+#   end
+#
+# @example With asChild - custom element
+#   render UI::Trigger.new(as_child: true) do |attrs|
+#     span(**attrs, class: "cursor-help") { "Help" }
+#   end
+class UI::TooltipTrigger < Phlex::HTML
+  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 view_template(&block)
-        trigger_attrs = tooltip_trigger_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    trigger_attrs = tooltip_trigger_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          # asChild mode: yield attributes to block
-          # The caller is responsible for rendering an element with these attributes
-          yield(trigger_attrs) if block_given?
-        else
-          # Default mode: render as button
-          button(**trigger_attrs, &block)
-        end
-      end
+    if @as_child
+      # asChild mode: yield attributes to block
+      # The caller is responsible for rendering an element with these attributes
+      yield(trigger_attrs) if block_given?
+    else
+      # Default mode: render as button
+      button(**trigger_attrs, &block)
     end
+  end
+end

data/app/helpers/ui/combobox_behavior.rb

@@ -39,7 +39,7 @@ module UI::ComboboxBehavior
   # @return [Hash] HTML attributes marking element as text target
   def combobox_text_html_attributes
     {
-      data: { ui__combobox_target: "text" }
+      data: {ui__combobox_target: "text"}
     }
   end
 

data/app/helpers/ui/empty_behavior.rb

@@ -6,7 +6,7 @@ module UI
     def empty_html_attributes
       {
         class: empty_classes,
-        data: { slot: "empty" }
+        data: {slot: "empty"}
       }
     end
 
@@ -24,7 +24,7 @@ module UI
     def empty_header_html_attributes
       {
         class: empty_header_classes,
-        data: { slot: "empty-header" }
+        data: {slot: "empty-header"}
       }
     end
 
@@ -42,7 +42,7 @@ module UI
     def empty_media_html_attributes
       {
         class: empty_media_classes,
-        data: { slot: "empty-media" }
+        data: {slot: "empty-media"}
       }
     end
 
@@ -74,7 +74,7 @@ module UI
     def empty_title_html_attributes
       {
         class: empty_title_classes,
-        data: { slot: "empty-title" }
+        data: {slot: "empty-title"}
       }
     end
 
@@ -92,7 +92,7 @@ module UI
     def empty_description_html_attributes
       {
         class: empty_description_classes,
-        data: { slot: "empty-description" }
+        data: {slot: "empty-description"}
       }
     end
 
@@ -110,7 +110,7 @@ module UI
     def empty_content_html_attributes
       {
         class: empty_content_classes,
-        data: { slot: "empty-content" }
+        data: {slot: "empty-content"}
       }
     end
 

data/app/helpers/ui/input_group_input_behavior.rb

@@ -15,7 +15,7 @@ module UI::InputGroupInputBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     # Merge data-slot to override the default "input" slot with "input-group-control"
     # For Phlex: merge at top level, for ERB/VC: merge inside attributes hash
-    data_slot_override = { data: { slot: "input-group-control" } }
+    data_slot_override = {data: {slot: "input-group-control"}}
 
     # Merge the data-slot both at top level (for Phlex) and in attributes (for ERB/VC)
     merged_attrs = attributes_value.deep_merge(data_slot_override)

data/app/helpers/ui/input_group_textarea_behavior.rb

@@ -15,7 +15,7 @@ module UI::InputGroupTextareaBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     # Merge data-slot to override the default textarea slot with "input-group-control"
     # For Phlex: merge at top level, for ERB/VC: merge inside attributes hash
-    data_slot_override = { data: { slot: "input-group-control" } }
+    data_slot_override = {data: {slot: "input-group-control"}}
 
     # Merge the data-slot both at top level (for Phlex) and in attributes (for ERB/VC)
     merged_attrs = attributes_value.deep_merge(data_slot_override)

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/helpers/ui/popover_content_behavior.rb

@@ -28,7 +28,7 @@ module UI::PopoverContentBehavior
   def popover_content_data_attributes
     {
       ui__popover_target: "content",
-      state: "closed",
+      state: "closed"
     }
   end
 

data/app/helpers/ui/popover_trigger_behavior.rb

@@ -10,7 +10,7 @@ module UI::PopoverTriggerBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     {
       class: popover_trigger_classes,
-      data: { ui__popover_target: "trigger" }
+      data: {ui__popover_target: "trigger"}
     }.merge(attributes_value)
   end
 

data/app/helpers/ui/select_behavior.rb

@@ -6,79 +6,79 @@
 # This module provides consistent size styling and HTML attribute generation.
 module UI::SelectBehavior
   # Returns HTML attributes for the select element
-    def select_html_attributes
-      data_attrs = {
-        controller: "ui--select",
-        ui__select_open_value: "false"
-      }
+  def select_html_attributes
+    data_attrs = {
+      controller: "ui--select",
+      ui__select_open_value: "false"
+    }
 
-      # Add value if provided
-      if @value.present?
-        data_attrs[:ui__select_value_value] = @value.to_s
-      end
-
-      attrs = {
-        class: select_classes,
-        data: data_attrs
-      }
+    # Add value if provided
+    if @value.present?
+      data_attrs[:ui__select_value_value] = @value.to_s
+    end
 
-      # Add data-placeholder attribute if there's a placeholder and no selected value
-      if @placeholder.present? && @selected.nil?
-        attrs[:"data-placeholder"] = "true"
-      end
+    attrs = {
+      class: select_classes,
+      data: data_attrs
+    }
 
-      attrs.compact
+    # Add data-placeholder attribute if there's a placeholder and no selected value
+    if @placeholder.present? && @selected.nil?
+      attrs[:"data-placeholder"] = "true"
     end
 
-    # Returns combined CSS classes for the select
-    def select_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        select_base_classes,
-        select_size_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+    attrs.compact
+  end
 
-    private
+  # Returns combined CSS classes for the select
+  def select_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      select_base_classes,
+      select_size_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    # Base classes applied to all selects
-    # The select container is just a wrapper for Stimulus controller
-    # All visual styling is on the trigger button
-    # h-fit prevents wrapper from expanding to include absolutely positioned content
-    def select_base_classes
-      "relative h-fit"
-    end
+  private
 
-    # Size-specific classes based on @size
-    # No size classes needed on container, they go on trigger
-    def select_size_classes
-      ""
-    end
+  # Base classes applied to all selects
+  # The select container is just a wrapper for Stimulus controller
+  # All visual styling is on the trigger button
+  # h-fit prevents wrapper from expanding to include absolutely positioned content
+  def select_base_classes
+    "relative h-fit"
+  end
+
+  # Size-specific classes based on @size
+  # No size classes needed on container, they go on trigger
+  def select_size_classes
+    ""
+  end
 
-    # Renders options for the select element
-    # Handles both array format [label, value] and hash format { label: x, value: y }
-    def render_options
-      return "" if @options.nil?
+  # Renders options for the select element
+  # Handles both array format [label, value] and hash format { label: x, value: y }
+  def render_options
+    return "" if @options.nil?
 
-      @options.map do |option|
-        label, value = extract_option_values(option)
-        selected = @selected.to_s == value.to_s ? "selected" : nil
+    @options.map do |option|
+      label, value = extract_option_values(option)
+      selected = (@selected.to_s == value.to_s) ? "selected" : nil
 
-        { label: label, value: value, selected: selected }
-      end
+      {label: label, value: value, selected: selected}
     end
+  end
 
-    # Extracts label and value from different option formats
-    def extract_option_values(option)
-      if option.is_a?(Array)
-        [option[0], option[1]]
-      elsif option.is_a?(Hash)
-        label = option[:label] || option["label"]
-        value = option[:value] || option["value"]
-        [label, value]
-      else
-        [option, option]
-      end
+  # Extracts label and value from different option formats
+  def extract_option_values(option)
+    if option.is_a?(Array)
+      [option[0], option[1]]
+    elsif option.is_a?(Hash)
+      label = option[:label] || option["label"]
+      value = option[:value] || option["value"]
+      [label, value]
+    else
+      [option, option]
     end
+  end
 end

data/app/helpers/ui/select_content_behavior.rb

@@ -5,38 +5,38 @@
 # Shared behavior for Select dropdown content across ERB, ViewComponent, and Phlex implementations.
 # This module provides consistent HTML attribute generation and styling.
 module UI::SelectContentBehavior
-    # Returns HTML attributes for the select content element
-    def select_content_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        class: select_content_classes,
-        data: {
-          ui__select_target: "content",
-          state: "closed",
-          slot: "select-content"
-        },
-        role: "listbox",
-        # CSS variables for positioning (set by JavaScript)
-        style: "box-sizing: border-box; display: flex; flex-direction: column; outline: none;"
-      }.merge(attributes_value || {})
-    end
+  # Returns HTML attributes for the select content element
+  def select_content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: select_content_classes,
+      data: {
+        ui__select_target: "content",
+        state: "closed",
+        slot: "select-content"
+      },
+      role: "listbox",
+      # CSS variables for positioning (set by JavaScript)
+      style: "box-sizing: border-box; display: flex; flex-direction: column; outline: none;"
+    }.merge(attributes_value || {})
+  end
 
-    # Returns combined CSS classes
-    def select_content_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        select_content_base_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes
+  def select_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      select_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes for select content dropdown
-    # FIXED: overflow-x-hidden overflow-y-auto instead of overflow-hidden
-    # FIXED: removed data-[state=closed]:hidden, use invisible pattern
-    # ADDED: max-h, origin, and translate classes for proper positioning
-    def select_content_base_classes
-      "absolute z-50 flex min-w-[8rem] flex-col overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:invisible data-[state=open]:visible"
-    end
+  # Base classes for select content dropdown
+  # FIXED: overflow-x-hidden overflow-y-auto instead of overflow-hidden
+  # FIXED: removed data-[state=closed]:hidden, use invisible pattern
+  # ADDED: max-h, origin, and translate classes for proper positioning
+  def select_content_base_classes
+    "absolute z-50 flex min-w-[8rem] flex-col overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:invisible data-[state=open]:visible"
   end
+end

data/app/helpers/ui/select_group_behavior.rb

@@ -5,31 +5,31 @@
 # Shared behavior for Select options group across ERB, ViewComponent, and Phlex implementations.
 # This module provides consistent HTML attribute generation and styling.
 module UI::SelectGroupBehavior
-    # Returns HTML attributes for the select group element
-    def select_group_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        class: select_group_classes,
-        role: "group",
-        data: {
-          slot: "select-group" # ADDED: data-slot attribute
-        }
-      }.merge(attributes_value || {})
-    end
+  # Returns HTML attributes for the select group element
+  def select_group_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: select_group_classes,
+      role: "group",
+      data: {
+        slot: "select-group" # ADDED: data-slot attribute
+      }
+    }.merge(attributes_value || {})
+  end
 
-    # Returns combined CSS classes
-    def select_group_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        select_group_base_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes
+  def select_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      select_group_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes for select group
-    def select_group_base_classes
-      "w-full"
-    end
+  # Base classes for select group
+  def select_group_base_classes
+    "w-full"
   end
+end

data/app/helpers/ui/select_item_behavior.rb

@@ -5,44 +5,44 @@
 # Shared behavior for Individual select option across ERB, ViewComponent, and Phlex implementations.
 # This module provides consistent HTML attribute generation and styling.
 module UI::SelectItemBehavior
-    # Returns HTML attributes for the select item element
-    def select_item_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      attrs = {
-        class: select_item_classes,
-        role: "option",
-        "aria-selected": "false",
-        data: {
-          ui__select_target: "item",
-          action: "click->ui--select#selectItem mouseenter->ui--select#handleItemMouseEnter mouseleave->ui--select#handleItemMouseLeave",
-          value: @value,
-          slot: "select-item" # ADDED: data-slot attribute
-        }
+  # Returns HTML attributes for the select item element
+  def select_item_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    attrs = {
+      class: select_item_classes,
+      role: "option",
+      "aria-selected": "false",
+      data: {
+        ui__select_target: "item",
+        action: "click->ui--select#selectItem mouseenter->ui--select#handleItemMouseEnter mouseleave->ui--select#handleItemMouseLeave",
+        value: @value,
+        slot: "select-item" # ADDED: data-slot attribute
       }
+    }
 
-      # Add disabled state if specified
-      if @disabled
-        attrs[:data][:disabled] = "true"
-        attrs[:"aria-disabled"] = "true"
-        attrs[:data][:state] = "disabled"
-      end
-
-      attrs.merge(attributes_value || {})
+    # Add disabled state if specified
+    if @disabled
+      attrs[:data][:disabled] = "true"
+      attrs[:"aria-disabled"] = "true"
+      attrs[:data][:state] = "disabled"
     end
 
-    # Returns combined CSS classes
-    def select_item_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        select_item_base_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+    attrs.merge(attributes_value || {})
+  end
 
-    private
+  # Returns combined CSS classes
+  def select_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      select_item_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    # Base classes for select item
-    def select_item_base_classes
-      "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
-    end
+  private
+
+  # Base classes for select item
+  def select_item_base_classes
+    "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
   end
+end

data/app/helpers/ui/select_label_behavior.rb

@@ -5,30 +5,30 @@
 # Shared behavior for Select group label across ERB, ViewComponent, and Phlex implementations.
 # This module provides consistent HTML attribute generation and styling.
 module UI::SelectLabelBehavior
-    # Returns HTML attributes for the select label element
-    def select_label_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        class: select_label_classes,
-        data: {
-          slot: "select-label" # ADDED: data-slot attribute
-        }
-      }.merge(attributes_value || {})
-    end
+  # Returns HTML attributes for the select label element
+  def select_label_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: select_label_classes,
+      data: {
+        slot: "select-label" # ADDED: data-slot attribute
+      }
+    }.merge(attributes_value || {})
+  end
 
-    # Returns combined CSS classes
-    def select_label_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        select_label_base_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes
+  def select_label_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      select_label_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes for select label
-    def select_label_base_classes
-      "px-2 py-1.5 text-xs text-muted-foreground"
-    end
+  # Base classes for select label
+  def select_label_base_classes
+    "px-2 py-1.5 text-xs text-muted-foreground"
   end
+end