fernandes-ui 0.1.1 → 0.1.4

data/app/components/ui/dropdown_menu_radio_group.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # RadioGroup - Phlex implementation
-    #
-    # Container for radio items providing semantic grouping.
-    # Uses DropdownMenuRadioGroupBehavior concern for shared styling logic.
-    #
-    # @example Radio group
-    #   render UI::RadioGroup.new do
-    #     render UI::RadioItem.new(value: "top", checked: true) { "Top" }
-    #     render UI::RadioItem.new(value: "bottom") { "Bottom" }
-    #   end
-    class UI::DropdownMenuRadioGroup < Phlex::HTML
-      include UI::DropdownMenuRadioGroupBehavior
+# RadioGroup - Phlex implementation
+#
+# Container for radio items providing semantic grouping.
+# Uses DropdownMenuRadioGroupBehavior concern for shared styling logic.
+#
+# @example Radio group
+#   render UI::RadioGroup.new do
+#     render UI::RadioItem.new(value: "top", checked: true) { "Top" }
+#     render UI::RadioItem.new(value: "bottom") { "Bottom" }
+#   end
+class UI::DropdownMenuRadioGroup < Phlex::HTML
+  include UI::DropdownMenuRadioGroupBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**dropdown_menu_radio_group_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**dropdown_menu_radio_group_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/dropdown_menu_radio_item.rb

@@ -1,57 +1,57 @@
 # frozen_string_literal: true
 
-    # RadioItem - Phlex implementation
-    #
-    # Menu item with radio state for exclusive selection within a group.
-    # Uses DropdownMenuRadioItemBehavior concern for shared styling logic.
-    #
-    # @example Radio item
-    #   render UI::RadioItem.new(value: "top", checked: true) { "Top" }
-    class UI::DropdownMenuRadioItem < Phlex::HTML
-      include UI::DropdownMenuRadioItemBehavior
+# RadioItem - Phlex implementation
+#
+# Menu item with radio state for exclusive selection within a group.
+# Uses DropdownMenuRadioItemBehavior concern for shared styling logic.
+#
+# @example Radio item
+#   render UI::RadioItem.new(value: "top", checked: true) { "Top" }
+class UI::DropdownMenuRadioItem < Phlex::HTML
+  include UI::DropdownMenuRadioItemBehavior
 
-      # @param value [String] Value of the radio item
-      # @param checked [Boolean] Whether item is checked
-      # @param disabled [Boolean] Whether item is disabled
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(value:, checked: false, disabled: false, classes: "", **attributes)
-        @value = value
-        @checked = checked
-        @disabled = disabled
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param value [String] Value of the radio item
+  # @param checked [Boolean] Whether item is checked
+  # @param disabled [Boolean] Whether item is disabled
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(value:, checked: false, disabled: false, classes: "", **attributes)
+    @value = value
+    @checked = checked
+    @disabled = disabled
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**dropdown_menu_radio_item_html_attributes.deep_merge(@attributes)) do
-          render_radio_indicator
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**dropdown_menu_radio_item_html_attributes.deep_merge(@attributes)) do
+      render_radio_indicator
+      yield if block_given?
+    end
+  end
 
-      private
+  private
 
-      def render_radio_indicator
-        span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
-          if @checked
-            span(data: { state: "checked" }) do
-              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: "lucide lucide-circle size-2 fill-current"
-              ) do |s|
-                s.circle(cx: "12", cy: "12", r: "10")
-              end
-            end
+  def render_radio_indicator
+    span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+      if @checked
+        span(data: {state: "checked"}) do
+          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: "lucide lucide-circle size-2 fill-current"
+          ) do |s|
+            s.circle(cx: "12", cy: "12", r: "10")
           end
         end
       end
     end
+  end
+end

data/app/components/ui/dropdown_menu_separator.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
-    # Separator - Phlex implementation
-    #
-    # Visual separator between menu items.
-    # Uses DropdownMenuSeparatorBehavior concern for shared styling logic.
-    #
-    # @example Basic separator
-    #   render UI::Separator.new
-    class UI::DropdownMenuSeparator < Phlex::HTML
-      include UI::DropdownMenuSeparatorBehavior
+# Separator - Phlex implementation
+#
+# Visual separator between menu items.
+# Uses DropdownMenuSeparatorBehavior concern for shared styling logic.
+#
+# @example Basic separator
+#   render UI::Separator.new
+class UI::DropdownMenuSeparator < Phlex::HTML
+  include UI::DropdownMenuSeparatorBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        div(**dropdown_menu_separator_html_attributes.deep_merge(@attributes))
-      end
-    end
+  def view_template
+    div(**dropdown_menu_separator_html_attributes.deep_merge(@attributes))
+  end
+end

data/app/components/ui/dropdown_menu_shortcut.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
-    # Shortcut - Phlex implementation
-    #
-    # Keyboard shortcut indicator displayed at the end of menu items.
-    # Uses DropdownMenuShortcutBehavior concern for shared styling logic.
-    #
-    # @example Shortcut
-    #   render UI::Shortcut.new { "⌘K" }
-    class UI::DropdownMenuShortcut < Phlex::HTML
-      include UI::DropdownMenuShortcutBehavior
+# Shortcut - Phlex implementation
+#
+# Keyboard shortcut indicator displayed at the end of menu items.
+# Uses DropdownMenuShortcutBehavior concern for shared styling logic.
+#
+# @example Shortcut
+#   render UI::Shortcut.new { "⌘K" }
+class UI::DropdownMenuShortcut < Phlex::HTML
+  include UI::DropdownMenuShortcutBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        span(**dropdown_menu_shortcut_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    span(**dropdown_menu_shortcut_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/dropdown_menu_sub.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # Sub - Phlex implementation
-    #
-    # Container for submenu with relative positioning.
-    # Uses DropdownMenuSubBehavior concern for shared styling logic.
-    #
-    # @example Submenu
-    #   render UI::Sub.new do
-    #     render UI::SubTrigger.new { "More Options" }
-    #     render UI::SubContent.new { "Submenu items" }
-    #   end
-    class UI::DropdownMenuSub < Phlex::HTML
-      include UI::DropdownMenuSubBehavior
+# Sub - Phlex implementation
+#
+# Container for submenu with relative positioning.
+# Uses DropdownMenuSubBehavior concern for shared styling logic.
+#
+# @example Submenu
+#   render UI::Sub.new do
+#     render UI::SubTrigger.new { "More Options" }
+#     render UI::SubContent.new { "Submenu items" }
+#   end
+class UI::DropdownMenuSub < Phlex::HTML
+  include UI::DropdownMenuSubBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**dropdown_menu_sub_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**dropdown_menu_sub_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/dropdown_menu_sub_content.rb

@@ -1,31 +1,31 @@
 # frozen_string_literal: true
 
-    # SubContent - Phlex implementation
-    #
-    # Submenu items container positioned to the right of the trigger.
-    # Uses DropdownMenuSubContentBehavior concern for shared styling logic.
-    #
-    # @example Submenu content
-    #   render UI::SubContent.new do
-    #     render UI::Item.new { "Submenu Item" }
-    #   end
-    class UI::DropdownMenuSubContent < Phlex::HTML
-      include UI::DropdownMenuSubContentBehavior
+# SubContent - Phlex implementation
+#
+# Submenu items container positioned to the right of the trigger.
+# Uses DropdownMenuSubContentBehavior concern for shared styling logic.
+#
+# @example Submenu content
+#   render UI::SubContent.new do
+#     render UI::Item.new { "Submenu Item" }
+#   end
+class UI::DropdownMenuSubContent < Phlex::HTML
+  include UI::DropdownMenuSubContentBehavior
 
-      # @param side [String] Side to position submenu ("right", "left", "top", "bottom")
-      # @param align [String] Alignment relative to trigger ("start", "center", "end")
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(side: "right", align: "start", classes: "", **attributes)
-        @side = side
-        @align = align
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param side [String] Side to position submenu ("right", "left", "top", "bottom")
+  # @param align [String] Alignment relative to trigger ("start", "center", "end")
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(side: "right", align: "start", classes: "", **attributes)
+    @side = side
+    @align = align
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**dropdown_menu_sub_content_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**dropdown_menu_sub_content_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/dropdown_menu_sub_trigger.rb

@@ -1,47 +1,47 @@
 # frozen_string_literal: true
 
-    # SubTrigger - Phlex implementation
-    #
-    # Item that opens a submenu on hover.
-    # Uses DropdownMenuSubTriggerBehavior concern for shared styling logic.
-    #
-    # @example Submenu trigger
-    #   render UI::SubTrigger.new { "More Options" }
-    class UI::DropdownMenuSubTrigger < Phlex::HTML
-      include UI::DropdownMenuSubTriggerBehavior
+# SubTrigger - Phlex implementation
+#
+# Item that opens a submenu on hover.
+# Uses DropdownMenuSubTriggerBehavior concern for shared styling logic.
+#
+# @example Submenu trigger
+#   render UI::SubTrigger.new { "More Options" }
+class UI::DropdownMenuSubTrigger < Phlex::HTML
+  include UI::DropdownMenuSubTriggerBehavior
 
-      # @param inset [Boolean] Whether to add left padding for alignment
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(inset: false, classes: "", **attributes)
-        @inset = inset
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param inset [Boolean] Whether to add left padding for alignment
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(inset: false, classes: "", **attributes)
+    @inset = inset
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**dropdown_menu_sub_trigger_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-          render_chevron_icon
-        end
-      end
+  def view_template(&block)
+    div(**dropdown_menu_sub_trigger_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
+      render_chevron_icon
+    end
+  end
 
-      private
+  private
 
-      def render_chevron_icon
-        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: "ml-auto lucide lucide-chevron-right"
-        ) do |s|
-          s.path(d: "m9 18 6-6-6-6")
-        end
-      end
+  def render_chevron_icon
+    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: "ml-auto lucide lucide-chevron-right"
+    ) do |s|
+      s.path(d: "m9 18 6-6-6-6")
     end
+  end
+end

data/app/components/ui/dropdown_menu_trigger.rb

@@ -1,43 +1,44 @@
 # frozen_string_literal: true
 
-    # Trigger - Phlex implementation
-    #
-    # Wrapper that adds toggle action to child element.
-    # Uses DropdownMenuTriggerBehavior concern for shared styling logic.
-    #
-    # Supports asChild pattern for composition without wrapper elements.
-    #
-    # @example Basic usage
-    #   render UI::Trigger.new { button { "Open Menu" } }
-    #
-    # @example With asChild - pass attributes to custom button
-    #   render UI::Trigger.new(as_child: true) do |trigger_attrs|
-    #     render UI::Button.new(**trigger_attrs) { "Menu" }
-    #   end
-    class UI::DropdownMenuTrigger < Phlex::HTML
-      include UI::DropdownMenuTriggerBehavior
-      include UI::SharedAsChildBehavior
+# Trigger - Phlex implementation
+#
+# Wrapper that adds toggle action to child element.
+# Uses DropdownMenuTriggerBehavior concern for shared styling logic.
+#
+# Supports asChild pattern for composition without wrapper elements.
+#
+# @example Basic usage
+#   render UI::Trigger.new { button { "Open Menu" } }
+#
+# @example With asChild - pass attributes to custom button
+#   render UI::Trigger.new(as_child: true) do |trigger_attrs|
+#     render UI::Button.new(**trigger_attrs) { "Menu" }
+#   end
+class UI::DropdownMenuTrigger < Phlex::HTML
+  include UI::DropdownMenuTriggerBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        trigger_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    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?
-        else
-          # Default: render wrapper div with trigger behavior
-          div(**trigger_attrs) do
-            yield if block_given?
-          end
-        end
+    if @as_child
+      # 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
+        yield if block_given?
       end
     end
+  end
+end

data/app/components/ui/empty.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
-    # Empty - Phlex implementation
-    #
-    # Displays empty states in applications with customizable media, titles, descriptions, and actions.
-    #
-    # @example Basic usage
-    #   render UI::Empty.new do
-    #     render UI::EmptyHeader.new do
-    #       render UI::EmptyTitle.new { "No results found" }
-    #       render UI::EmptyDescription.new { "Try adjusting your search criteria." }
-    #     end
-    #   end
-    class UI::Empty < Phlex::HTML
-      include UI::EmptyBehavior
+# Empty - Phlex implementation
+#
+# Displays empty states in applications with customizable media, titles, descriptions, and actions.
+#
+# @example Basic usage
+#   render UI::Empty.new do
+#     render UI::EmptyHeader.new do
+#       render UI::EmptyTitle.new { "No results found" }
+#       render UI::EmptyDescription.new { "Try adjusting your search criteria." }
+#     end
+#   end
+class UI::Empty < Phlex::HTML
+  include UI::EmptyBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**empty_html_attributes.merge(@attributes), &block)
-      end
-    end
+  def view_template(&block)
+    div(**empty_html_attributes.merge(@attributes), &block)
+  end
+end

data/app/components/ui/empty_content.rb

@@ -1,22 +1,22 @@
 # frozen_string_literal: true
 
-    # EmptyContent - Phlex implementation
-    #
-    # Displays the content of the empty state such as a button, input or a link.
-    #
-    # @example
-    #   render UI::EmptyContent.new do
-    #     render UI::Button.new { "Create Item" }
-    #   end
-    class UI::EmptyContent < Phlex::HTML
-      include UI::EmptyContentBehavior
+# EmptyContent - Phlex implementation
+#
+# Displays the content of the empty state such as a button, input or a link.
+#
+# @example
+#   render UI::EmptyContent.new do
+#     render UI::Button.new { "Create Item" }
+#   end
+class UI::EmptyContent < Phlex::HTML
+  include UI::EmptyContentBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**empty_content_html_attributes.merge(@attributes), &block)
-      end
-    end
+  def view_template(&block)
+    div(**empty_content_html_attributes.merge(@attributes), &block)
+  end
+end

data/app/components/ui/empty_description.rb

@@ -1,20 +1,20 @@
 # frozen_string_literal: true
 
-    # EmptyDescription - Phlex implementation
-    #
-    # Displays the description of the empty state.
-    #
-    # @example
-    #   render UI::EmptyDescription.new { "Try adjusting your search criteria." }
-    class UI::EmptyDescription < Phlex::HTML
-      include UI::EmptyDescriptionBehavior
+# EmptyDescription - Phlex implementation
+#
+# Displays the description of the empty state.
+#
+# @example
+#   render UI::EmptyDescription.new { "Try adjusting your search criteria." }
+class UI::EmptyDescription < Phlex::HTML
+  include UI::EmptyDescriptionBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        p(**empty_description_html_attributes.merge(@attributes), &block)
-      end
-    end
+  def view_template(&block)
+    p(**empty_description_html_attributes.merge(@attributes), &block)
+  end
+end