fernandes-ui 0.1.0

data/app/view_components/ui/navigation_menu_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+    # NavigationMenuComponent - ViewComponent implementation
+    #
+    # A collection of links for navigating websites. Built on Radix UI patterns.
+    #
+    # @example Basic usage
+    #   <%= render UI::NavigationMenuComponent.new do %>
+    #     <%= render UI::ListComponent.new do %>
+    #       <%= render UI::ItemComponent.new do %>
+    #         <%= render UI::TriggerComponent.new do %>Getting Started<% end %>
+    #         <%= render UI::ContentComponent.new do %>
+    #           <%= render UI::LinkComponent.new(href: "/docs") do %>Introduction<% end %>
+    #         <% end %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    class UI::NavigationMenuComponent < ViewComponent::Base
+      include UI::NavigationMenuBehavior
+
+      # @param viewport [Boolean] Whether to use viewport for content positioning
+      # @param delay_duration [Integer] Delay in ms before opening on hover
+      # @param skip_delay_duration [Integer] Delay skip period between items
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(viewport: true, delay_duration: 200, skip_delay_duration: 300, classes: "", **attributes)
+        @viewport = viewport
+        @delay_duration = delay_duration
+        @skip_delay_duration = skip_delay_duration
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :nav, **navigation_menu_html_attributes.deep_merge(@attributes) do
+          safe_join([
+            content,
+            (@viewport ? render(UI::ViewportComponent.new) : nil)
+          ].compact)
+        end
+      end
+    end

data/app/view_components/ui/navigation_menu_content_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # ContentComponent - ViewComponent implementation
+    #
+    # Container for navigation menu content that appears when trigger is activated.
+    class UI::NavigationMenuContentComponent < ViewComponent::Base
+      include UI::ContentBehavior
+
+      # @param viewport [Boolean] Whether content should be rendered in viewport
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(viewport: true, classes: "", **attributes)
+        @viewport = viewport
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **navigation_menu_content_html_attributes.deep_merge(@attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/navigation_menu_item_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # ItemComponent - ViewComponent implementation
+    #
+    # Wrapper for individual navigation menu item.
+    class UI::NavigationMenuItemComponent < ViewComponent::Base
+      include UI::ItemBehavior
+
+      # @param value [String] Optional value for controlled state
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: nil, classes: "", **attributes)
+        @value = value
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :li, **navigation_menu_item_html_attributes.deep_merge(@attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/navigation_menu_link_component.rb

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+require "nokogiri"
+
+    # LinkComponent - ViewComponent implementation
+    #
+    # Navigation link component. Supports asChild pattern for composition with link_to.
+    #
+    # @example Basic usage
+    #   <%= render UI::LinkComponent.new(href: "/docs") do %>
+    #     Documentation
+    #   <% end %>
+    #
+    # @example With asChild for Rails link_to
+    #   <%= render UI::LinkComponent.new(as_child: true) do %>
+    #     <%= link_to "Documentation", docs_path %>
+    #   <% end %>
+    #
+    # @example As trigger style (for direct links without dropdown)
+    #   <%= render UI::LinkComponent.new(as_child: true, trigger_style: true) do %>
+    #     <%= link_to "About", about_path %>
+    #   <% end %>
+    class UI::NavigationMenuLinkComponent < ViewComponent::Base
+      include UI::LinkBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param href [String] URL for the link (ignored when as_child: true)
+      # @param active [Boolean] Whether this link is currently active
+      # @param as_child [Boolean] When true, injects attributes into child element
+      # @param trigger_style [Boolean] When true, uses trigger styling (for direct links)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(href: nil, active: false, as_child: false, trigger_style: false, classes: "", **attributes)
+        @href = href
+        @active = active
+        @as_child = as_child
+        @trigger_style = trigger_style
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        link_attrs = build_link_attributes
+
+        if @as_child
+          # asChild mode: merge attributes into child element using Nokogiri
+          rendered = content.to_s
+          doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
+          first_element = doc.children.find { |node| node.element? }
+
+          if first_element
+            # Merge data attributes
+            link_attrs.fetch(:data, {}).each do |key, value|
+              next if value.nil?
+
+              html_key = key.to_s.gsub("__", "--").gsub("_", "-")
+              first_element["data-#{html_key}"] = value.to_s
+            end
+
+            # Merge CSS classes with TailwindMerge
+            if link_attrs[:class]
+              existing_classes = first_element["class"] || ""
+              merged_classes = TailwindMerge::Merger.new.merge([existing_classes, link_attrs[:class]].join(" "))
+              first_element["class"] = merged_classes
+            end
+
+            # Merge other attributes (except data and class)
+            link_attrs.except(:data, :class).each do |key, value|
+              next if value.nil?
+
+              first_element[key.to_s.gsub("_", "-")] = value.to_s
+            end
+
+            doc.to_html.html_safe
+          else
+            content
+          end
+        else
+          # Default mode: render as anchor
+          content_tag :a, **link_attrs do
+            content
+          end
+        end
+      end
+
+      private
+
+      def build_link_attributes
+        base_attrs = navigation_menu_link_html_attributes
+
+        # Override classes if trigger_style is true
+        if @trigger_style
+          base_attrs[:class] = TailwindMerge::Merger.new.merge([
+            navigation_menu_link_trigger_style_classes,
+            @classes
+          ].compact.join(" "))
+        end
+
+        base_attrs.deep_merge(@attributes)
+      end
+    end

data/app/view_components/ui/navigation_menu_list_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # ListComponent - ViewComponent implementation
+    #
+    # Container for navigation menu items.
+    class UI::NavigationMenuListComponent < ViewComponent::Base
+      include UI::ListBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :ul, **navigation_menu_list_html_attributes.deep_merge(@attributes) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/navigation_menu_trigger_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+    # TriggerComponent - ViewComponent implementation
+    #
+    # Button that toggles the navigation menu content.
+    # Includes an animated chevron icon.
+    class UI::NavigationMenuTriggerComponent < ViewComponent::Base
+      include UI::TriggerBehavior
+
+      # @param first [Boolean] Whether this is the first trigger (gets tabindex=0)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(first: false, classes: "", **attributes)
+        @first = first
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :button, **navigation_menu_trigger_html_attributes.deep_merge(@attributes) do
+          safe_join([
+            content,
+            chevron_icon
+          ])
+        end
+      end
+
+      private
+
+      def chevron_icon
+        content_tag :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: navigation_menu_trigger_chevron_classes,
+                          "aria-hidden": "true" do
+          content_tag :path, nil, d: "m6 9 6 6 6-6"
+        end
+      end
+    end

data/app/view_components/ui/navigation_menu_viewport_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # ViewportComponent - ViewComponent implementation
+    #
+    # Container for navigation menu content when viewport mode is enabled.
+    class UI::NavigationMenuViewportComponent < ViewComponent::Base
+      include UI::ViewportBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **navigation_menu_viewport_wrapper_html_attributes do
+          content_tag :div, nil, **navigation_menu_viewport_html_attributes.deep_merge(@attributes)
+        end
+      end
+    end

data/app/view_components/ui/p_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::PComponent < ViewComponent::Base
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def call
+      extend UI::PBehavior
+      attrs = p_html_attributes
+      content_tag :p, **attrs.merge(@attributes) do
+        content
+      end
+    end
+  end
+end

data/app/view_components/ui/pagination_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    # Pagination component (ViewComponent)
+    # Container for pagination navigation
+    class UI::PaginationComponent < ViewComponent::Base
+      include UI::PaginationBehavior
+
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(classes: "", attributes: {})
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :nav, content, **pagination_html_attributes
+      end
+    end

data/app/view_components/ui/pagination_content_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+    # Pagination Content component (ViewComponent)
+    # List container for pagination items
+    class UI::PaginationContentComponent < ViewComponent::Base
+      include UI::PaginationContentBehavior
+
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(classes: "", attributes: {})
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :ul, content, **content_html_attributes
+      end
+    end

data/app/view_components/ui/pagination_ellipsis_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Pagination Ellipsis component (ViewComponent)
+    # Visual indicator for skipped pages
+    class UI::PaginationEllipsisComponent < ViewComponent::Base
+      include UI::PaginationEllipsisBehavior
+
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(classes: "", attributes: {})
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :span, **ellipsis_html_attributes do
+          content_tag(: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: "size-4") do
+            content_tag(:circle, nil, cx: "12", cy: "12", r: "1") +
+            content_tag(:circle, nil, cx: "19", cy: "12", r: "1") +
+            content_tag(:circle, nil, cx: "5", cy: "12", r: "1")
+          end +
+          content_tag(:span, "More pages", class: "sr-only")
+        end
+      end
+    end

data/app/view_components/ui/pagination_item_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    # Pagination Item component (ViewComponent)
+    # List item wrapper for pagination elements
+    class UI::PaginationItemComponent < ViewComponent::Base
+      include UI::PaginationItemBehavior
+
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(attributes: {})
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :li, content, **item_html_attributes
+      end
+    end

data/app/view_components/ui/pagination_link_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Pagination Link component (ViewComponent)
+    # Clickable link for page numbers
+    class UI::PaginationLinkComponent < ViewComponent::Base
+      include UI::PaginationLinkBehavior
+
+      # @param href [String] URL for the link
+      # @param active [Boolean] whether this link is for the current page
+      # @param size [String] size variant: "icon", "default", "sm", "lg"
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", active: false, size: "icon", classes: "", attributes: {})
+        @href = href
+        @active = active
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :a, **link_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/pagination_next_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Pagination Next component (ViewComponent)
+    # Next page button with icon and text
+    class UI::PaginationNextComponent < ViewComponent::Base
+      include UI::PaginationNextBehavior
+
+      # @param href [String] URL for the next page
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", classes: "", attributes: {})
+        @href = href
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render UI::PaginationLinkComponent.new(
+          href: @href,
+          size: "default",
+          classes: next_classes,
+          attributes: next_attributes
+        ) do
+          content_tag(:span, "Next", class: "hidden sm:block") +
+          content_tag(: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: "size-4") do
+            content_tag(:path, nil, d: "m9 18 6-6-6-6")
+          end
+        end
+      end
+    end

data/app/view_components/ui/pagination_previous_component.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Pagination Previous component (ViewComponent)
+    # Previous page button with icon and text
+    class UI::PaginationPreviousComponent < ViewComponent::Base
+      include UI::PaginationPreviousBehavior
+
+      # @param href [String] URL for the previous page
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(href: "#", classes: "", attributes: {})
+        @href = href
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        render UI::PaginationLinkComponent.new(
+          href: @href,
+          size: "default",
+          classes: previous_classes,
+          attributes: previous_attributes
+        ) do
+          content_tag(: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: "size-4") do
+            content_tag(:path, nil, d: "m15 18-6-6 6-6")
+          end +
+          content_tag(:span, "Previous", class: "hidden sm:block")
+        end
+      end
+    end

data/app/view_components/ui/popover_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+    # PopoverComponent - ViewComponent implementation
+    #
+    # Container for popover trigger and content.
+    # Uses PopoverBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::PopoverComponent.new do %>
+    #     <%= render UI::TriggerComponent.new do %>
+    #       <button>Click me</button>
+    #     <% end %>
+    #     <%= render UI::ContentComponent.new do %>
+    #       Popover content
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example With custom placement
+    #   <%= render UI::PopoverComponent.new(placement: "top", offset: 8) do %>
+    #     ...
+    #   <% end %>
+    class UI::PopoverComponent < ViewComponent::Base
+      include UI::PopoverBehavior
+
+      # @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")
+      # @param hover_delay [Integer] Delay in milliseconds for hover trigger
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placement: "bottom",
+        offset: 4,
+        trigger: "click",
+        hover_delay: 200,
+        classes: "",
+        align: nil,
+        side_offset: nil,
+        **attributes
+      )
+        @placement = placement
+        @offset = side_offset || offset
+        @trigger = trigger
+        @hover_delay = hover_delay
+        @classes = classes
+        @align = align
+        @attributes = attributes
+      end
+
+      def call
+        content_tag :div, **popover_html_attributes do
+          content
+        end
+      end
+    end

data/app/view_components/ui/popover_content_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # ContentComponent - ViewComponent implementation
+    #
+    # The floating content panel.
+    # Uses PopoverContentBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::ContentComponent.new do %>
+    #     Popover content here
+    #   <% end %>
+    #
+    # @example With custom styling
+    #   <%= render UI::ContentComponent.new(classes: "w-80 p-6") do %>
+    #     Content
+    #   <% end %>
+    class UI::PopoverContentComponent < ViewComponent::Base
+      include UI::PopoverContentBehavior
+
+      # @param side [String] Side of the trigger to show the content ("top", "bottom", "left", "right")
+      # @param align [String] Alignment relative to the trigger ("start", "center", "end")
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(side: "bottom", align: "center", classes: "", **attributes)
+        @side = side
+        @align = align
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def call
+        content_attrs = popover_content_html_attributes
+
+        # Merge data attributes properly
+        if @attributes[:data]
+          content_attrs[:data] = content_attrs[:data].merge(@attributes[:data])
+        end
+
+        content_tag :div, **content_attrs.deep_merge(@attributes.except(:data)) do
+          content
+        end
+      end
+    end

data/app/view_components/ui/popover_trigger_component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+    # TriggerComponent - ViewComponent implementation
+    #
+    # Button or element that triggers the popover.
+    # Uses PopoverTriggerBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   <%= render UI::TriggerComponent.new do %>
+    #     <button>Click me</button>
+    #   <% end %>
+    #
+    # @example As child (wraps content without adding wrapper)
+    #   <%= render UI::TriggerComponent.new(as_child: true) do %>
+    #     <button>Click me</button>
+    #   <% end %>
+    class UI::PopoverTriggerComponent < ViewComponent::Base
+      include UI::PopoverTriggerBehavior
+
+      # @param as_child [Boolean] If true, adds data attributes to child without 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 call
+        trigger_attrs = popover_trigger_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # asChild mode: merge attributes into child element
+          # Parse the rendered content and add trigger attributes to the first element
+          rendered = content.to_s
+
+          # Use Nokogiri to parse and modify the HTML
+          doc = Nokogiri::HTML::DocumentFragment.parse(rendered)
+          first_element = doc.children.find { |node| node.element? }
+
+          if first_element
+            # Merge data attributes
+            trigger_attrs.fetch(:data, {}).each do |key, value|
+              # Convert Rails naming convention to HTML: _ becomes -, __ becomes --
+              html_key = key.to_s.gsub("__", "--").gsub("_", "-")
+              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
+        else
+          # Default mode: render as div
+          content_tag :div, **trigger_attrs do
+            content
+          end
+        end
+      end
+    end