fernandes-ui 0.1.0

data/app/behaviors/ui/navigation_menu_content_behavior.rb

@@ -0,0 +1,65 @@
+# 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
+
+      # 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
+
+        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

data/app/behaviors/ui/navigation_menu_item_behavior.rb

@@ -0,0 +1,38 @@
+# 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
+
+      # 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"
+        }
+
+        # Add value if provided (for controlled state)
+        base_data[:value] = @value if defined?(@value) && @value
+
+        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+      end
+    end

data/app/behaviors/ui/navigation_menu_link_behavior.rb

@@ -0,0 +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
+
+        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 aria-current for active links
+        attrs[:"aria-current"] = "page" if active_value
+
+        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 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
+
+        (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

data/app/behaviors/ui/navigation_menu_list_behavior.rb

@@ -0,0 +1,33 @@
+# 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
+
+      # 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

data/app/behaviors/ui/navigation_menu_trigger_behavior.rb

@@ -0,0 +1,57 @@
+# 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
+
+        attrs = {
+          class: navigation_menu_trigger_classes,
+          data: navigation_menu_trigger_data_attributes,
+          type: "button",
+          "aria-expanded": "false",
+          tabindex: first_value ? "0" : "-1"
+        }
+        attrs
+      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 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

@@ -0,0 +1,61 @@
+# 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
+
+      # 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 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

data/app/behaviors/ui/p_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for P component
+    module UI::PBehavior
+      # Base CSS classes for P
+      def p_base_classes
+        "leading-7 [&:not(:first-child)]:mt-6"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def p_classes
+        TailwindMerge::Merger.new.merge([p_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def p_html_attributes
+        {
+          class: p_classes
+        }
+      end
+    end

data/app/behaviors/ui/pagination_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination container component
+    # Handles navigation role and aria attributes
+    module UI::PaginationBehavior
+      # Base CSS classes for pagination container
+      def pagination_base_classes
+        "mx-auto flex w-full justify-center"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def pagination_classes
+        TailwindMerge::Merger.new.merge([pagination_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for pagination container
+      def pagination_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          role: "navigation",
+          "aria-label": "pagination",
+          "data-slot": "pagination",
+          class: pagination_classes
+        )
+      end
+    end

data/app/behaviors/ui/pagination_content_behavior.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Content component
+    # Handles the list container for pagination items
+    module UI::PaginationContentBehavior
+      # Base CSS classes for pagination content
+      def content_base_classes
+        "flex flex-row items-center gap-1"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def content_classes
+        TailwindMerge::Merger.new.merge([content_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for pagination content
+      def content_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          "data-slot": "pagination-content",
+          class: content_classes
+        )
+      end
+    end

data/app/behaviors/ui/pagination_ellipsis_behavior.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Ellipsis component
+    # Handles ellipsis indicator for skipped pages
+    module UI::PaginationEllipsisBehavior
+      # Base CSS classes for ellipsis
+      def ellipsis_base_classes
+        "flex size-9 items-center justify-center"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def ellipsis_classes
+        TailwindMerge::Merger.new.merge([ellipsis_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for ellipsis
+      def ellipsis_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          "aria-hidden": "true",
+          "data-slot": "pagination-ellipsis",
+          class: ellipsis_classes
+        )
+      end
+    end

data/app/behaviors/ui/pagination_item_behavior.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Item component
+    # Handles list item wrapper for pagination elements
+    module UI::PaginationItemBehavior
+      # Build complete HTML attributes hash for pagination item
+      def item_html_attributes
+        base_attrs = @attributes || {}
+        base_attrs.merge(
+          "data-slot": "pagination-item"
+        )
+      end
+    end

data/app/behaviors/ui/pagination_link_behavior.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Link component
+    # Handles link styling and active state
+    module UI::PaginationLinkBehavior
+      # Base CSS classes for pagination link (from button component)
+      def link_base_classes
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+      end
+
+      # Variant classes based on active state
+      def link_variant_classes
+        if @active
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+        else
+          "hover:bg-accent hover:text-accent-foreground"
+        end
+      end
+
+      # Size classes for pagination link
+      def link_size_classes
+        case @size.to_s
+        when "icon"
+          "size-9"
+        when "default"
+          "h-9 px-4 py-2"
+        when "sm"
+          "h-8 px-3 text-xs"
+        when "lg"
+          "h-10 px-8"
+        else
+          "size-9"
+        end
+      end
+
+      # Merge all classes using TailwindMerge
+      def link_classes
+        TailwindMerge::Merger.new.merge([
+          link_base_classes,
+          link_variant_classes,
+          link_size_classes,
+          @classes
+        ].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash for pagination link
+      def link_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          href: @href,
+          "data-slot": "pagination-link",
+          "data-active": @active ? "true" : nil,
+          "aria-current": @active ? "page" : nil,
+          class: link_classes
+        ).compact
+      end
+    end

data/app/behaviors/ui/pagination_next_behavior.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Next component
+    # Handles next button with icon and text
+    module UI::PaginationNextBehavior
+      # Additional classes for next button
+      def next_additional_classes
+        "gap-1 px-2.5 sm:pr-2.5"
+      end
+
+      # Merge additional classes with custom classes using TailwindMerge
+      def next_classes
+        TailwindMerge::Merger.new.merge([next_additional_classes, @classes].compact.join(" "))
+      end
+
+      # Merge aria-label with user attributes
+      def next_attributes
+        (@attributes || {}).merge({ "aria-label": "Go to next page" })
+      end
+    end

data/app/behaviors/ui/pagination_previous_behavior.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # Shared behavior for Pagination Previous component
+    # Handles previous button with icon and text
+    module UI::PaginationPreviousBehavior
+      # Additional classes for previous button
+      def previous_additional_classes
+        "gap-1 px-2.5 sm:pl-2.5"
+      end
+
+      # Merge additional classes with custom classes using TailwindMerge
+      def previous_classes
+        TailwindMerge::Merger.new.merge([previous_additional_classes, @classes].compact.join(" "))
+      end
+
+      # Merge aria-label with user attributes
+      def previous_attributes
+        (@attributes || {}).merge({ "aria-label": "Go to previous page" })
+      end
+    end

data/app/behaviors/ui/popover_behavior.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# PopoverBehavior
+#
+# Shared behavior for Popover component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverBehavior
+  # Returns HTML attributes for the popover container element
+  def popover_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_classes,
+      data: popover_data_attributes
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover
+  def popover_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the popover controller
+  def popover_data_attributes
+    {
+      controller: "ui--popover",
+      ui__popover_placement_value: normalized_placement,
+      ui__popover_offset_value: @offset,
+      ui__popover_trigger_value: @trigger,
+      ui__popover_hover_delay_value: @hover_delay
+    }
+  end
+
+  private
+
+  # Base classes applied to all popovers - relative positioning for absolute content
+  def popover_base_classes
+    "relative inline-block"
+  end
+
+  # Normalize placement from legacy align parameter
+  def normalized_placement
+    # If we have a legacy align parameter, convert it to placement
+    if @align && @align != "center"
+      "bottom-#{@align}"
+    else
+      @placement
+    end
+  end
+end

data/app/behaviors/ui/popover_content_behavior.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+# PopoverContentBehavior
+#
+# Shared behavior for PopoverContent component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+module UI::PopoverContentBehavior
+  # Returns HTML attributes for the popover content element
+  def popover_content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: popover_content_classes,
+      data: popover_content_data_attributes
+    }.merge(attributes_value)
+  end
+
+  # Returns combined CSS classes for the popover content
+  def popover_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      popover_content_base_classes,
+      classes_value
+
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the popover content
+  def popover_content_data_attributes
+    {
+      ui__popover_target: "content",
+      state: "closed",
+    }
+  end
+
+  private
+
+  # Base classes from shadcn/ui - exact match
+  # Note: Positioning classes like origin-(--ui-popover-content-transform-origin)
+  # will be handled by our Stimulus controller for positioning
+  def popover_content_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 data-[state=closed]:invisible data-[state=open]:visible data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none absolute top-0 left-0 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden"
+  end
+
+  # Calculate placement value from side and align
+  def placement_value
+    if @align == "center"
+      @side
+    else
+      "#{@side}-#{@align}"
+    end
+  end
+end