fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/navigation_menu_content_behavior.rb

@@ -1,65 +1,64 @@
 # frozen_string_literal: true
 
-    # ContentBehavior
-    #
-    # Shared behavior for NavigationMenu Content component.
-    module UI::NavigationMenuContentBehavior
-      # Returns HTML attributes for the content
-      def navigation_menu_content_html_attributes
-        attrs = {
-          class: navigation_menu_content_classes,
-          data: navigation_menu_content_data_attributes
-        }
-        attrs
-      end
+# ContentBehavior
+#
+# Shared behavior for NavigationMenu Content component.
+module UI::NavigationMenuContentBehavior
+  # Returns HTML attributes for the content
+  def navigation_menu_content_html_attributes
+    {
+      class: navigation_menu_content_classes,
+      data: navigation_menu_content_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the content
-      def navigation_menu_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        viewport_mode = defined?(@viewport) ? @viewport : true
+  # Returns combined CSS classes for the content
+  def navigation_menu_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    viewport_mode = defined?(@viewport) ? @viewport : true
 
-        base_classes = if viewport_mode
-          # Viewport mode - content appears inside viewport
-          [
-            "absolute left-0 top-0 w-full p-2 md:w-auto",
-            # Animation classes
-            "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
-            "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
-            "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
-            "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52"
-          ]
-        else
-          # Non-viewport mode - content appears directly under trigger
-          [
-            "absolute left-0 top-full z-50 mt-1.5 w-max p-2",
-            "rounded-md border bg-popover text-popover-foreground shadow",
-            # Visibility controlled by data-state (JS sets this AFTER animation completes for closing)
-            "data-[state=closed]:invisible data-[state=open]:visible",
-            "data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto",
-            # Animation classes - use motion for directional animations
-            # fill-mode-forwards keeps the final animation state (prevents flash back to original position)
-            "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out fill-mode-forwards",
-            "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
-            "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
-            "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52"
-          ]
-        end
+    base_classes = if viewport_mode
+      # Viewport mode - content appears inside viewport
+      [
+        "absolute left-0 top-0 w-full p-2 md:w-auto",
+        # Animation classes
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+        "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+        "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+        "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52"
+      ]
+    else
+      # Non-viewport mode - content appears directly under trigger
+      [
+        "absolute left-0 top-full z-50 mt-1.5 w-max p-2",
+        "rounded-md border bg-popover text-popover-foreground shadow",
+        # Visibility controlled by data-state (JS sets this AFTER animation completes for closing)
+        "data-[state=closed]:invisible data-[state=open]:visible",
+        "data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto",
+        # Animation classes - use motion for directional animations
+        # fill-mode-forwards keeps the final animation state (prevents flash back to original position)
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out fill-mode-forwards",
+        "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+        "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+        "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52"
+      ]
+    end
 
-        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
-      def navigation_menu_content_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          slot: "navigation-menu-content",
-          state: "closed",
-          "ui--navigation-menu-target": "content",
-          action: "mouseleave->ui--navigation-menu#handleContentLeave"
-        }
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+  # Returns data attributes
+  def navigation_menu_content_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      slot: "navigation-menu-content",
+      state: "closed",
+      "ui--navigation-menu-target": "content",
+      action: "mouseleave->ui--navigation-menu#handleContentLeave"
+    }
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/navigation_menu_item_behavior.rb

@@ -1,38 +1,37 @@
 # frozen_string_literal: true
 
-    # ItemBehavior
-    #
-    # Shared behavior for NavigationMenu Item component.
-    module UI::NavigationMenuItemBehavior
-      # Returns HTML attributes for the item
-      def navigation_menu_item_html_attributes
-        attrs = {
-          class: navigation_menu_item_classes,
-          data: navigation_menu_item_data_attributes
-        }
-        attrs
-      end
+# ItemBehavior
+#
+# Shared behavior for NavigationMenu Item component.
+module UI::NavigationMenuItemBehavior
+  # Returns HTML attributes for the item
+  def navigation_menu_item_html_attributes
+    {
+      class: navigation_menu_item_classes,
+      data: navigation_menu_item_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the item
-      def navigation_menu_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "group/navigation-menu-item relative",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the item
+  def navigation_menu_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "group/navigation-menu-item relative",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes
-      def navigation_menu_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          slot: "navigation-menu-item",
-          "ui--navigation-menu-target": "item"
-        }
+  # Returns data attributes
+  def navigation_menu_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      slot: "navigation-menu-item",
+      "ui--navigation-menu-target": "item"
+    }
 
-        # Add value if provided (for controlled state)
-        base_data[:value] = @value if defined?(@value) && @value
+    # Add value if provided (for controlled state)
+    base_data[:value] = @value if defined?(@value) && @value
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/navigation_menu_link_behavior.rb

@@ -1,68 +1,68 @@
 # frozen_string_literal: true
 
-    # LinkBehavior
-    #
-    # Shared behavior for NavigationMenu Link component.
-    # Supports asChild pattern for composition with link_to.
-    module UI::NavigationMenuLinkBehavior
-      # Returns HTML attributes for the link
-      def navigation_menu_link_html_attributes
-        active_value = defined?(@active) && @active
+# LinkBehavior
+#
+# Shared behavior for NavigationMenu Link component.
+# Supports asChild pattern for composition with link_to.
+module UI::NavigationMenuLinkBehavior
+  # Returns HTML attributes for the link
+  def navigation_menu_link_html_attributes
+    active_value = defined?(@active) && @active
 
-        attrs = {
-          class: navigation_menu_link_classes,
-          data: navigation_menu_link_data_attributes
-        }
+    attrs = {
+      class: navigation_menu_link_classes,
+      data: navigation_menu_link_data_attributes
+    }
 
-        # Add href if provided and not using asChild
-        attrs[:href] = @href if defined?(@href) && @href
+    # Add href if provided and not using asChild
+    attrs[:href] = @href if defined?(@href) && @href
 
-        # Add aria-current for active links
-        attrs[:"aria-current"] = "page" if active_value
+    # Add aria-current for active links
+    attrs[:"aria-current"] = "page" if active_value
 
-        attrs
-      end
+    attrs
+  end
 
-      # Returns combined CSS classes for the link
-      def navigation_menu_link_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          # Base styles
-          "flex flex-col gap-1 rounded-sm p-2 text-sm",
-          # Interaction states
-          "outline-hidden transition-colors select-none",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus:bg-accent focus:text-accent-foreground",
-          "focus-visible:ring-[3px] focus-visible:ring-ring/50",
-          # Icon styling
-          "[&_svg:not([class*='text-'])]:text-muted-foreground",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the link
+  def navigation_menu_link_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      # Base styles
+      "flex flex-col gap-1 rounded-sm p-2 text-sm",
+      # Interaction states
+      "outline-hidden transition-colors select-none",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground",
+      "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      # Icon styling
+      "[&_svg:not([class*='text-'])]:text-muted-foreground",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes
-      def navigation_menu_link_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        active_value = defined?(@active) && @active
+  # Returns data attributes
+  def navigation_menu_link_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    active_value = defined?(@active) && @active
 
-        base_data = {
-          slot: "navigation-menu-link",
-          active: active_value ? "true" : nil
-        }.compact
+    base_data = {
+      slot: "navigation-menu-link",
+      active: active_value ? "true" : nil
+    }.compact
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
 
-      # Returns CSS classes that mimic the trigger style (for direct links without dropdown)
-      def navigation_menu_link_trigger_style_classes
-        [
-          "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center gap-1",
-          "rounded-md bg-background px-4 py-2 text-sm font-medium",
-          "outline-hidden transition-colors",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus:bg-accent focus:text-accent-foreground",
-          "focus-visible:ring-[3px] focus-visible:ring-ring/50",
-          "disabled:pointer-events-none disabled:opacity-50"
-        ].join(" ")
-      end
-    end
+  # Returns CSS classes that mimic the trigger style (for direct links without dropdown)
+  def navigation_menu_link_trigger_style_classes
+    [
+      "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center gap-1",
+      "rounded-md bg-background px-4 py-2 text-sm font-medium",
+      "outline-hidden transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground",
+      "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "disabled:pointer-events-none disabled:opacity-50"
+    ].join(" ")
+  end
+end

data/app/behaviors/ui/navigation_menu_list_behavior.rb

@@ -1,33 +1,32 @@
 # frozen_string_literal: true
 
-    # ListBehavior
-    #
-    # Shared behavior for NavigationMenu List component.
-    module UI::NavigationMenuListBehavior
-      # Returns HTML attributes for the list
-      def navigation_menu_list_html_attributes
-        attrs = {
-          class: navigation_menu_list_classes,
-          data: navigation_menu_list_data_attributes
-        }
-        attrs
-      end
+# ListBehavior
+#
+# Shared behavior for NavigationMenu List component.
+module UI::NavigationMenuListBehavior
+  # Returns HTML attributes for the list
+  def navigation_menu_list_html_attributes
+    {
+      class: navigation_menu_list_classes,
+      data: navigation_menu_list_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the list
-      def navigation_menu_list_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "group/navigation-menu-list flex flex-1 list-none items-center justify-center gap-1",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the list
+  def navigation_menu_list_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "group/navigation-menu-list flex flex-1 list-none items-center justify-center gap-1",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes
-      def navigation_menu_list_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          slot: "navigation-menu-list"
-        }
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+  # Returns data attributes
+  def navigation_menu_list_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      slot: "navigation-menu-list"
+    }
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/navigation_menu_trigger_behavior.rb

@@ -1,57 +1,56 @@
 # frozen_string_literal: true
 
-    # TriggerBehavior
-    #
-    # Shared behavior for NavigationMenu Trigger component.
-    module UI::NavigationMenuTriggerBehavior
-      # Returns HTML attributes for the trigger
-      def navigation_menu_trigger_html_attributes
-        first_value = defined?(@first) && @first
+# TriggerBehavior
+#
+# Shared behavior for NavigationMenu Trigger component.
+module UI::NavigationMenuTriggerBehavior
+  # Returns HTML attributes for the trigger
+  def navigation_menu_trigger_html_attributes
+    first_value = defined?(@first) && @first
 
-        attrs = {
-          class: navigation_menu_trigger_classes,
-          data: navigation_menu_trigger_data_attributes,
-          type: "button",
-          "aria-expanded": "false",
-          tabindex: first_value ? "0" : "-1"
-        }
-        attrs
-      end
+    {
+      class: navigation_menu_trigger_classes,
+      data: navigation_menu_trigger_data_attributes,
+      type: "button",
+      "aria-expanded": "false",
+      tabindex: first_value ? "0" : "-1"
+    }
+  end
 
-      # Returns combined CSS classes for the trigger
-      def navigation_menu_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          # Base styles
-          "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center gap-1",
-          "rounded-md bg-background px-4 py-2 text-sm font-medium",
-          # Focus and hover states
-          "outline-hidden transition-colors",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus:bg-accent focus:text-accent-foreground",
-          "focus-visible:ring-[3px] focus-visible:ring-ring/50",
-          # Disabled state
-          "disabled:pointer-events-none disabled:opacity-50",
-          # Open state
-          "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the trigger
+  def navigation_menu_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      # Base styles
+      "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center gap-1",
+      "rounded-md bg-background px-4 py-2 text-sm font-medium",
+      # Focus and hover states
+      "outline-hidden transition-colors",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus:bg-accent focus:text-accent-foreground",
+      "focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      # Disabled state
+      "disabled:pointer-events-none disabled:opacity-50",
+      # Open state
+      "data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes
-      def navigation_menu_trigger_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          slot: "navigation-menu-trigger",
-          state: "closed",
-          "ui--navigation-menu-target": "trigger",
-          action: "click->ui--navigation-menu#toggle mouseenter->ui--navigation-menu#handleTriggerHover mouseleave->ui--navigation-menu#handleTriggerLeave"
-        }
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
+  # Returns data attributes
+  def navigation_menu_trigger_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      slot: "navigation-menu-trigger",
+      state: "closed",
+      "ui--navigation-menu-target": "trigger",
+      action: "click->ui--navigation-menu#toggle mouseenter->ui--navigation-menu#handleTriggerHover mouseleave->ui--navigation-menu#handleTriggerLeave"
+    }
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
 
-      # Returns CSS classes for the chevron icon
-      def navigation_menu_trigger_chevron_classes
-        "size-3 shrink-0 transition-transform duration-200 group-data-[state=open]/navigation-menu-trigger:rotate-180"
-      end
-    end
+  # Returns CSS classes for the chevron icon
+  def navigation_menu_trigger_chevron_classes
+    "size-3 shrink-0 transition-transform duration-200 group-data-[state=open]/navigation-menu-trigger:rotate-180"
+  end
+end

data/app/behaviors/ui/navigation_menu_viewport_behavior.rb

@@ -1,61 +1,60 @@
 # frozen_string_literal: true
 
-    # ViewportBehavior
-    #
-    # Shared behavior for NavigationMenu Viewport component.
-    module UI::NavigationMenuViewportBehavior
-      # Returns HTML attributes for the viewport wrapper
-      def navigation_menu_viewport_wrapper_html_attributes
-        {
-          class: navigation_menu_viewport_wrapper_classes,
-          data: { slot: "navigation-menu-viewport-wrapper" }
-        }
-      end
+# ViewportBehavior
+#
+# Shared behavior for NavigationMenu Viewport component.
+module UI::NavigationMenuViewportBehavior
+  # Returns HTML attributes for the viewport wrapper
+  def navigation_menu_viewport_wrapper_html_attributes
+    {
+      class: navigation_menu_viewport_wrapper_classes,
+      data: {slot: "navigation-menu-viewport-wrapper"}
+    }
+  end
 
-      # Returns CSS classes for the viewport wrapper
-      def navigation_menu_viewport_wrapper_classes
-        "absolute left-0 top-full flex justify-center perspective-[2000px]"
-      end
+  # Returns CSS classes for the viewport wrapper
+  def navigation_menu_viewport_wrapper_classes
+    "absolute left-0 top-full flex justify-center perspective-[2000px]"
+  end
 
-      # Returns HTML attributes for the viewport
-      def navigation_menu_viewport_html_attributes
-        attrs = {
-          class: navigation_menu_viewport_classes,
-          data: navigation_menu_viewport_data_attributes
-        }
-        attrs
-      end
+  # Returns HTML attributes for the viewport
+  def navigation_menu_viewport_html_attributes
+    {
+      class: navigation_menu_viewport_classes,
+      data: navigation_menu_viewport_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the viewport
-      def navigation_menu_viewport_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          # Base styles
-          "origin-top-center bg-popover text-popover-foreground",
-          "relative mt-1.5 overflow-hidden rounded-md border shadow",
-          # Dynamic sizing via CSS variables
-          "h-[var(--ui-navigation-menu-viewport-height)]",
-          "w-full md:w-[var(--ui-navigation-menu-viewport-width)]",
-          # State visibility
-          "data-[state=closed]:invisible data-[state=open]:visible",
-          "data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto",
-          # Animation
-          "transition-[width,height] duration-200",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out data-[state=open]:fade-in",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the viewport
+  def navigation_menu_viewport_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      # Base styles
+      "origin-top-center bg-popover text-popover-foreground",
+      "relative mt-1.5 overflow-hidden rounded-md border shadow",
+      # Dynamic sizing via CSS variables
+      "h-[var(--ui-navigation-menu-viewport-height)]",
+      "w-full md:w-[var(--ui-navigation-menu-viewport-width)]",
+      # State visibility
+      "data-[state=closed]:invisible data-[state=open]:visible",
+      "data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto",
+      # Animation
+      "transition-[width,height] duration-200",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes
-      def navigation_menu_viewport_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          slot: "navigation-menu-viewport",
-          state: "closed",
-          "ui--navigation-menu-target": "viewport"
-        }
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+  # Returns data attributes
+  def navigation_menu_viewport_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      slot: "navigation-menu-viewport",
+      state: "closed",
+      "ui--navigation-menu-target": "viewport"
+    }
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end