fernandes-ui 0.1.0

data/app/components/ui/menubar_radio_item.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+    # RadioItem - Phlex implementation
+    #
+    # A menu item with radio functionality.
+    #
+    # @example Basic usage
+    #   render UI::RadioItem.new(value: "option1", checked: true) { "Option 1" }
+    class UI::MenubarRadioItem < Phlex::HTML
+      include UI::MenubarRadioItemBehavior
+
+      # @param value [String] Value for this radio item
+      # @param checked [Boolean] Initial checked state
+      # @param disabled [Boolean] Disable the item
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(value: nil, checked: false, disabled: false, classes: "", **attributes)
+        @value = value
+        @checked = checked
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**menubar_radio_item_html_attributes.deep_merge(@attributes)) do
+          # Radio indicator container
+          span(class: "absolute left-2 flex size-3.5 items-center justify-center") do
+            if @checked
+              render_radio_icon
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def render_radio_icon
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewBox: "0 0 24 24",
+          fill: "currentColor",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-2",
+          data: { state: "checked" }
+        ) do |svg|
+          svg.circle(cx: "12", cy: "12", r: "10")
+        end
+      end
+    end

data/app/components/ui/menubar_separator.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # Visual divider between menu items.
+    #
+    # @example Basic usage
+    #   render UI::Separator.new
+    class UI::MenubarSeparator < Phlex::HTML
+      include UI::MenubarSeparatorBehavior
+
+      # @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(**menubar_separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/menubar_shortcut.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Shortcut - Phlex implementation
+    #
+    # Displays keyboard shortcut hint for menu items.
+    #
+    # @example Basic usage
+    #   render UI::Item.new do
+    #     plain "New Tab"
+    #     render UI::Shortcut.new { "Ctrl+T" }
+    #   end
+    class UI::MenubarShortcut < Phlex::HTML
+      include UI::MenubarShortcutBehavior
+
+      # @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(**menubar_shortcut_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/menubar_sub.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # Sub - Phlex implementation
+    #
+    # Container for submenu within the menubar menu.
+    #
+    # @example Basic usage
+    #   render UI::Sub.new do
+    #     render UI::SubTrigger.new { "Share" }
+    #     render UI::SubContent.new do
+    #       render UI::Item.new { "Email" }
+    #       render UI::Item.new { "Message" }
+    #     end
+    #   end
+    class UI::MenubarSub < Phlex::HTML
+      include UI::MenubarSubBehavior
+
+      # @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(**menubar_sub_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/menubar_sub_content.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # SubContent - Phlex implementation
+    #
+    # Container for submenu items.
+    #
+    # @example Basic usage
+    #   render UI::SubContent.new do
+    #     render UI::Item.new { "Email" }
+    #     render UI::Item.new { "Message" }
+    #   end
+    class UI::MenubarSubContent < Phlex::HTML
+      include UI::MenubarSubContentBehavior
+
+      # @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(**menubar_sub_content_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/menubar_sub_trigger.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+    # SubTrigger - Phlex implementation
+    #
+    # Menu item that opens a submenu.
+    #
+    # @example Basic usage
+    #   render UI::SubTrigger.new { "Share" }
+    class UI::MenubarSubTrigger < Phlex::HTML
+      include UI::MenubarSubTriggerBehavior
+
+      # @param inset [Boolean] Add left padding to align with checkbox/radio items
+      # @param disabled [Boolean] Disable the item
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(inset: false, disabled: false, classes: "", **attributes)
+        @inset = inset
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**menubar_sub_trigger_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+          render_chevron_icon
+        end
+      end
+
+      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 size-4"
+        ) do |svg|
+          svg.path(d: "m9 18 6-6-6-6")
+        end
+      end
+    end

data/app/components/ui/menubar_trigger.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # Button that toggles the menu content open/closed.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new(first: true) { "File" }
+    class UI::MenubarTrigger < Phlex::HTML
+      include UI::MenubarTriggerBehavior
+
+      # @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 view_template(&block)
+        button(**menubar_trigger_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/muted.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class UI::Muted < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::MutedBehavior
+      p(**muted_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/navigation_menu.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    # NavigationMenu - Phlex implementation
+    #
+    # A collection of links for navigating websites. Built on Radix UI patterns.
+    # Uses NavigationMenuBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::NavigationMenu.new do
+    #     render UI::List.new do
+    #       render UI::Item.new do
+    #         render UI::Trigger.new { "Getting Started" }
+    #         render UI::Content.new do
+    #           render UI::Link.new(href: "/docs") { "Introduction" }
+    #         end
+    #       end
+    #     end
+    #   end
+    #
+    # @example With viewport disabled
+    #   render UI::NavigationMenu.new(viewport: false) do
+    #     # Content appears directly under trigger instead of in viewport
+    #   end
+    class UI::NavigationMenu < Phlex::HTML
+      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 view_template(&block)
+        nav(**navigation_menu_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+
+          # Render viewport if enabled
+          if @viewport
+            render UI::Viewport.new
+          end
+        end
+      end
+    end

data/app/components/ui/navigation_menu_content.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # Container for navigation menu content that appears when trigger is activated.
+    # Supports animated transitions based on motion direction.
+    #
+    # @example Basic usage
+    #   render UI::Content.new do
+    #     ul(class: "grid gap-2 md:w-[400px]") do
+    #       li do
+    #         render UI::Link.new(href: "/docs") { "Documentation" }
+    #       end
+    #     end
+    #   end
+    class UI::NavigationMenuContent < Phlex::HTML
+      include UI::ContentBehavior
+
+      # @param viewport [Boolean] Whether content should be rendered in viewport (inherited from parent)
+      # @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 view_template(&block)
+        div(**navigation_menu_content_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/navigation_menu_item.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+    # Item - Phlex implementation
+    #
+    # Wrapper for individual navigation menu item.
+    #
+    # @example Basic usage with trigger and content
+    #   render UI::Item.new do
+    #     render UI::Trigger.new { "Products" }
+    #     render UI::Content.new do
+    #       # Links here
+    #     end
+    #   end
+    #
+    # @example Direct link without dropdown
+    #   render UI::Item.new do
+    #     render UI::Link.new(href: "/about") { "About" }
+    #   end
+    class UI::NavigationMenuItem < Phlex::HTML
+      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 view_template(&block)
+        li(**navigation_menu_item_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/navigation_menu_link.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+    # Link - Phlex implementation
+    #
+    # Navigation link component. Supports asChild pattern for composition with link_to.
+    #
+    # @example Basic usage
+    #   render UI::Link.new(href: "/docs") { "Documentation" }
+    #
+    # @example With asChild for Rails link_to
+    #   render UI::Link.new(as_child: true) do |link_attrs|
+    #     link_to "Documentation", docs_path, **link_attrs
+    #   end
+    #
+    # @example Active link
+    #   render UI::Link.new(href: "/docs", active: true) { "Documentation" }
+    #
+    # @example As trigger style (for direct links without dropdown)
+    #   render UI::Link.new(as_child: true, trigger_style: true) do |link_attrs|
+    #     link_to "About", about_path, **link_attrs
+    #   end
+    class UI::NavigationMenuLink < Phlex::HTML
+      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, yields attributes to block instead of rendering anchor
+      # @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 view_template(&block)
+        link_attrs = build_link_attributes
+
+        if @as_child
+          # Yield attributes to block - child must accept them
+          yield(link_attrs) if block_given?
+        else
+          # Default: render as anchor
+          a(**link_attrs) do
+            yield if block_given?
+          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/components/ui/navigation_menu_list.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # List - Phlex implementation
+    #
+    # Container for navigation menu items.
+    #
+    # @example Basic usage
+    #   render UI::List.new do
+    #     render UI::Item.new do
+    #       render UI::Trigger.new { "Menu" }
+    #     end
+    #   end
+    class UI::NavigationMenuList < Phlex::HTML
+      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 view_template(&block)
+        ul(**navigation_menu_list_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/navigation_menu_trigger.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # Button that toggles the navigation menu content.
+    # Includes an animated chevron icon.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new { "Products" }
+    #
+    # @example First trigger (receives initial focus)
+    #   render UI::Trigger.new(first: true) { "Home" }
+    class UI::NavigationMenuTrigger < Phlex::HTML
+      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 view_template(&block)
+        button(**navigation_menu_trigger_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+          render_chevron
+        end
+      end
+
+      private
+
+      def render_chevron
+        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 |svg|
+          svg.path(d: "m6 9 6 6 6-6")
+        end
+      end
+    end

data/app/components/ui/navigation_menu_viewport.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Viewport - Phlex implementation
+    #
+    # Container for navigation menu content when viewport mode is enabled.
+    # Provides consistent positioning and animated sizing.
+    #
+    # @example Usage (automatically included in NavigationMenu when viewport: true)
+    #   render UI::Viewport.new
+    class UI::NavigationMenuViewport < Phlex::HTML
+      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 view_template
+        div(**navigation_menu_viewport_wrapper_html_attributes) do
+          div(**navigation_menu_viewport_html_attributes.deep_merge(@attributes))
+        end
+      end
+    end

data/app/components/ui/p.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module UI
+  class P < Phlex::HTML
+    def initialize(classes: nil, **attributes)
+      @classes = classes
+      @attributes = attributes
+    end
+
+    def view_template(&block)
+      extend UI::PBehavior
+      p(**p_html_attributes.merge(@attributes), &block)
+    end
+  end
+end

data/app/components/ui/pagination.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    # Pagination component (Phlex)
+    # Container for pagination navigation
+    class UI::Pagination < Phlex::HTML
+      include UI::PaginationBehavior
+
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(classes: "", attributes: {}, **)
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        nav(**pagination_html_attributes, &block)
+      end
+    end

data/app/components/ui/pagination_content.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    # Pagination Content component (Phlex)
+    # List container for pagination items
+    class UI::PaginationContent < Phlex::HTML
+      include UI::PaginationContentBehavior
+
+      # @param classes [String] additional CSS classes
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(classes: "", attributes: {}, **)
+        @classes = classes
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        ul(**content_html_attributes, &block)
+      end
+    end

data/app/components/ui/pagination_ellipsis.rb

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

data/app/components/ui/pagination_item.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+    # Pagination Item component (Phlex)
+    # List item wrapper for pagination elements
+    class UI::PaginationItem < Phlex::HTML
+      include UI::PaginationItemBehavior
+
+      # @param attributes [Hash] additional HTML attributes
+      def initialize(attributes: {}, **)
+        @attributes = attributes
+        super()
+      end
+
+      def view_template(&block)
+        li(**item_html_attributes, &block)
+      end
+    end