fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/menubar_shortcut_behavior.rb

@@ -1,29 +1,29 @@
 # frozen_string_literal: true
 
-    # MenubarShortcutBehavior
-    #
-    # Shared behavior for MenubarShortcut component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarShortcutBehavior
-      # Returns HTML attributes for the shortcut
-      def menubar_shortcut_html_attributes
-        {
-          class: menubar_shortcut_classes,
-          data: menubar_shortcut_data_attributes
-        }
-      end
+# MenubarShortcutBehavior
+#
+# Shared behavior for MenubarShortcut component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarShortcutBehavior
+  # Returns HTML attributes for the shortcut
+  def menubar_shortcut_html_attributes
+    {
+      class: menubar_shortcut_classes,
+      data: menubar_shortcut_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the shortcut
-      def menubar_shortcut_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "text-muted-foreground ml-auto text-xs tracking-widest",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the shortcut
+  def menubar_shortcut_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "text-muted-foreground ml-auto text-xs tracking-widest",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the shortcut
-      def menubar_shortcut_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {})
-      end
-    end
+  # Returns data attributes for the shortcut
+  def menubar_shortcut_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    attributes_value&.fetch(:data, {}) || {}
+  end
+end

data/app/behaviors/ui/menubar_sub_behavior.rb

@@ -1,30 +1,30 @@
 # frozen_string_literal: true
 
-    # MenubarSubBehavior
-    #
-    # Shared behavior for MenubarSub component across ERB, ViewComponent, and Phlex implementations.
-    # This is a wrapper for submenus within the menubar menu.
-    module UI::MenubarSubBehavior
-      # Returns HTML attributes for the submenu wrapper
-      def menubar_sub_html_attributes
-        {
-          class: menubar_sub_classes,
-          data: menubar_sub_data_attributes
-        }
-      end
+# MenubarSubBehavior
+#
+# Shared behavior for MenubarSub component across ERB, ViewComponent, and Phlex implementations.
+# This is a wrapper for submenus within the menubar menu.
+module UI::MenubarSubBehavior
+  # Returns HTML attributes for the submenu wrapper
+  def menubar_sub_html_attributes
+    {
+      class: menubar_sub_classes,
+      data: menubar_sub_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the submenu wrapper
-      def menubar_sub_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "relative",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the submenu wrapper
+  def menubar_sub_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "relative",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the submenu wrapper
-      def menubar_sub_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {})
-      end
-    end
+  # Returns data attributes for the submenu wrapper
+  def menubar_sub_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    attributes_value&.fetch(:data, {}) || {}
+  end
+end

data/app/behaviors/ui/menubar_sub_content_behavior.rb

@@ -1,49 +1,49 @@
 # frozen_string_literal: true
 
-    # MenubarSubContentBehavior
-    #
-    # Shared behavior for MenubarSubContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarSubContentBehavior
-      # Returns HTML attributes for the sub content container
-      def menubar_sub_content_html_attributes
-        {
-          class: menubar_sub_content_classes,
-          data: menubar_sub_content_data_attributes,
-          role: "menu",
-          tabindex: "-1"
-        }
-      end
+# MenubarSubContentBehavior
+#
+# Shared behavior for MenubarSubContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarSubContentBehavior
+  # Returns HTML attributes for the sub content container
+  def menubar_sub_content_html_attributes
+    {
+      class: menubar_sub_content_classes,
+      data: menubar_sub_content_data_attributes,
+      role: "menu",
+      tabindex: "-1"
+    }
+  end
 
-      # Returns combined CSS classes for the sub content
-      def menubar_sub_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        base_classes = [
-          "bg-popover text-popover-foreground",
-          "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",
-          "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-          "hidden absolute"
-        ].join(" ")
+  # Returns combined CSS classes for the sub content
+  def menubar_sub_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base_classes = [
+      "bg-popover text-popover-foreground",
+      "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",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+      "hidden absolute"
+    ].join(" ")
 
-        TailwindMerge::Merger.new.merge([
-          base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([
+      base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus target
-      def menubar_sub_content_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          action: "mouseenter->ui--menubar#cancelSubmenuClose",
-          state: "closed",
-          side: "right",
-          align: "start"
-        })
-      end
-    end
+  # Returns data attributes for Stimulus target
+  def menubar_sub_content_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      action: "mouseenter->ui--menubar#cancelSubmenuClose",
+      state: "closed",
+      side: "right",
+      align: "start"
+    })
+  end
+end

data/app/behaviors/ui/menubar_sub_trigger_behavior.rb

@@ -1,57 +1,57 @@
 # frozen_string_literal: true
 
-    # MenubarSubTriggerBehavior
-    #
-    # Shared behavior for MenubarSubTrigger component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarSubTriggerBehavior
-      # Returns HTML attributes for the sub trigger
-      def menubar_sub_trigger_html_attributes
-        attrs = {
-          class: menubar_sub_trigger_classes,
-          data: menubar_sub_trigger_data_attributes,
-          role: "menuitem",
-          tabindex: "-1"
-        }
-
-        # Add disabled attribute if specified
-        attrs[:"data-disabled"] = "" if disabled?
-
-        attrs
-      end
-
-      # Returns combined CSS classes for the sub trigger
-      def menubar_sub_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        inset_class = inset? ? "pl-8" : ""
-
-        TailwindMerge::Merger.new.merge([
-          "focus:bg-accent focus:text-accent-foreground",
-          "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-          "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm",
-          "outline-hidden select-none whitespace-nowrap",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          inset_class,
-          classes_value
-        ].compact.join(" "))
-      end
-
-      # Returns data attributes for the sub trigger
-      def menubar_sub_trigger_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--menubar-target": "item",
-          action: "mouseenter->ui--menubar#openSubmenu mouseleave->ui--menubar#closeSubmenu",
-          state: "closed"
-        })
-      end
-
-      private
-
-      def inset?
-        defined?(@inset) && @inset
-      end
-
-      def disabled?
-        defined?(@disabled) && @disabled
-      end
-    end
+# MenubarSubTriggerBehavior
+#
+# Shared behavior for MenubarSubTrigger component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarSubTriggerBehavior
+  # Returns HTML attributes for the sub trigger
+  def menubar_sub_trigger_html_attributes
+    attrs = {
+      class: menubar_sub_trigger_classes,
+      data: menubar_sub_trigger_data_attributes,
+      role: "menuitem",
+      tabindex: "-1"
+    }
+
+    # Add disabled attribute if specified
+    attrs[:"data-disabled"] = "" if disabled?
+
+    attrs
+  end
+
+  # Returns combined CSS classes for the sub trigger
+  def menubar_sub_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    inset_class = inset? ? "pl-8" : ""
+
+    TailwindMerge::Merger.new.merge([
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm",
+      "outline-hidden select-none whitespace-nowrap",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      inset_class,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the sub trigger
+  def menubar_sub_trigger_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--menubar-target": "item",
+      action: "mouseenter->ui--menubar#openSubmenu mouseleave->ui--menubar#closeSubmenu",
+      state: "closed"
+    })
+  end
+
+  private
+
+  def inset?
+    defined?(@inset) && @inset
+  end
+
+  def disabled?
+    defined?(@disabled) && @disabled
+  end
+end

data/app/behaviors/ui/menubar_trigger_behavior.rb

@@ -1,48 +1,46 @@
 # frozen_string_literal: true
 
-    # MenubarTriggerBehavior
-    #
-    # Shared behavior for MenubarTrigger component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarTriggerBehavior
-      # Returns HTML attributes for the trigger
-      def menubar_trigger_html_attributes
-        attrs = {
-          class: menubar_trigger_classes,
-          data: menubar_trigger_data_attributes,
-          role: "menuitem",
-          "aria-haspopup": "menu",
-          "aria-expanded": "false",
-          tabindex: first_trigger? ? "0" : "-1"
-        }
+# MenubarTriggerBehavior
+#
+# Shared behavior for MenubarTrigger component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarTriggerBehavior
+  # Returns HTML attributes for the trigger
+  def menubar_trigger_html_attributes
+    {
+      class: menubar_trigger_classes,
+      data: menubar_trigger_data_attributes,
+      role: "menuitem",
+      "aria-haspopup": "menu",
+      "aria-expanded": "false",
+      tabindex: first_trigger? ? "0" : "-1"
+    }
+  end
 
-        attrs
-      end
+  # Returns combined CSS classes for the trigger
+  def menubar_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns combined CSS classes for the trigger
-      def menubar_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-          "focus:bg-accent focus:text-accent-foreground",
-          "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns data attributes for Stimulus
+  def menubar_trigger_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--menubar-target": "trigger",
+      action: "click->ui--menubar#toggle mouseenter->ui--menubar#handleTriggerHover keydown->ui--menubar#handleTriggerKeydown",
+      state: "closed"
+    })
+  end
 
-      # Returns data attributes for Stimulus
-      def menubar_trigger_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--menubar-target": "trigger",
-          action: "click->ui--menubar#toggle mouseenter->ui--menubar#handleTriggerHover keydown->ui--menubar#handleTriggerKeydown",
-          state: "closed"
-        })
-      end
+  private
 
-      private
-
-      # Check if this is the first trigger (should have tabindex=0)
-      def first_trigger?
-        defined?(@first) && @first
-      end
-    end
+  # Check if this is the first trigger (should have tabindex=0)
+  def first_trigger?
+    defined?(@first) && @first
+  end
+end

data/app/behaviors/ui/muted_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Muted component
-    module UI::MutedBehavior
-      # Base CSS classes for Muted
-      def muted_base_classes
-        "text-sm text-muted-foreground"
-      end
+# UI::MutedBehavior
+#
+# @ui_component Muted
+# @ui_category typography
+#
+# @ui_anatomy Muted - Muted component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::MutedBehavior
+  # Base CSS classes for Muted
+  def muted_base_classes
+    "text-sm text-muted-foreground"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def muted_classes
-        TailwindMerge::Merger.new.merge([muted_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def muted_classes
+    TailwindMerge::Merger.new.merge([muted_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def muted_html_attributes
-        {
-          class: muted_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def muted_html_attributes
+    {
+      class: muted_classes
+    }
+  end
+end

data/app/behaviors/ui/navigation_menu_behavior.rb

@@ -1,42 +1,71 @@
 # frozen_string_literal: true
 
-    # NavigationMenuBehavior
-    #
-    # Shared behavior for NavigationMenu component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    module UI::NavigationMenuBehavior
-      # Returns HTML attributes for the navigation menu container
-      def navigation_menu_html_attributes
-        attrs = {
-          class: navigation_menu_classes,
-          data: navigation_menu_data_attributes
-        }
-        attrs
-      end
+# UI::NavigationMenuBehavior
+#
+# @ui_component Navigation Menu
+# @ui_description NavigationMenu - Phlex implementation
+# @ui_category navigation
+#
+# @ui_anatomy Navigation Menu - A collection of links for navigating websites. Built on Radix UI patterns. (required)
+# @ui_anatomy Content - Container for navigation menu content that appears when trigger is activated. (required)
+# @ui_anatomy Item - Wrapper for individual navigation menu item.
+# @ui_anatomy Link - Navigation link component. Supports asChild pattern for composition with link_to.
+# @ui_anatomy List - Container for navigation menu items.
+# @ui_anatomy Trigger - Button that toggles the navigation menu content. (required)
+# @ui_anatomy Viewport - Container for navigation menu content when viewport mode is enabled.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Click outside to close
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Navigation
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/navigation/
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Escape Closes the component
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowLeft Moves focus left or decreases value
+# @ui_keyboard ArrowRight Moves focus right or increases value
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+# @ui_keyboard Tab Moves focus to next focusable element
+#
+# @ui_related menubar
+# @ui_related tabs
+#
+module UI::NavigationMenuBehavior
+  # Returns HTML attributes for the navigation menu container
+  def navigation_menu_html_attributes
+    {
+      class: navigation_menu_classes,
+      data: navigation_menu_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the navigation menu
-      def navigation_menu_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the navigation menu
+  def navigation_menu_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus controller
-      def navigation_menu_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        viewport_value = defined?(@viewport) ? @viewport : true
-        delay_value = defined?(@delay_duration) ? @delay_duration : 200
-        skip_delay_value = defined?(@skip_delay_duration) ? @skip_delay_duration : 300
+  # Returns data attributes for Stimulus controller
+  def navigation_menu_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    viewport_value = defined?(@viewport) ? @viewport : true
+    delay_value = defined?(@delay_duration) ? @delay_duration : 200
+    skip_delay_value = defined?(@skip_delay_duration) ? @skip_delay_duration : 300
 
-        base_data = {
-          controller: "ui--navigation-menu",
-          "ui--navigation-menu-viewport-value": viewport_value,
-          "ui--navigation-menu-delay-duration-value": delay_value,
-          "ui--navigation-menu-skip-delay-duration-value": skip_delay_value
-        }
+    base_data = {
+      controller: "ui--navigation-menu",
+      "ui--navigation-menu-viewport-value": viewport_value,
+      "ui--navigation-menu-delay-duration-value": delay_value,
+      "ui--navigation-menu-skip-delay-duration-value": skip_delay_value
+    }
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end