fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/p_behavior.rb

@@ -2,22 +2,30 @@
 
 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
+# UI::PBehavior
+#
+# @ui_component P
+# @ui_category typography
+#
+# @ui_anatomy P - P component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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
+  # 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
+  # Build complete HTML attributes hash
+  def p_html_attributes
+    {
+      class: p_classes
+    }
+  end
+end

data/app/behaviors/ui/pagination_behavior.rb

@@ -1,26 +1,40 @@
 # 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
+# UI::PaginationBehavior
+#
+# @ui_component Pagination
+# @ui_category navigation
+#
+# @ui_anatomy Pagination - Root container for pagination (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Ellipsis - Indicator for truncated items
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy Link - Clickable navigation link
+# @ui_anatomy Next - Navigate to next item
+# @ui_anatomy Previous - Navigate to previous item
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+#
+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
+  # 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
+  # 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

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

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

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

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

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

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

@@ -1,17 +1,44 @@
 # frozen_string_literal: true
 
-# PopoverBehavior
+# UI::PopoverBehavior
+#
+# @ui_component Popover
+# @ui_description Popover - Phlex implementation
+# @ui_category overlay
+#
+# @ui_anatomy Popover - Container for popover trigger and content. (required)
+# @ui_anatomy Content - The floating content panel. (required)
+# @ui_anatomy Trigger - Button or element that triggers the popover. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Click outside to close
+#
+# @ui_aria_pattern Dialog (Non-modal)
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/dialog-non-modal/
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Escape Closes the component
+#
+# @ui_related tooltip
+# @ui_related hover_card
+# @ui_related dropdown_menu
 #
-# 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
+  # When used with asChild, only data attributes are returned (no classes)
   def popover_html_attributes
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-    {
-      class: popover_classes,
+    attrs = {
       data: popover_data_attributes
-    }.merge(attributes_value)
+    }
+
+    # Only add container classes if not using asChild
+    # When asChild is true, the child component handles its own styling
+    unless instance_variable_defined?(:@as_child) && @as_child
+      attrs[:class] = popover_classes
+    end
+
+    attrs.merge(attributes_value)
   end
 
   # Returns combined CSS classes for the popover

data/app/behaviors/ui/popover_content_behavior.rb

@@ -28,7 +28,7 @@ module UI::PopoverContentBehavior
   def popover_content_data_attributes
     {
       ui__popover_target: "content",
-      state: "closed",
+      state: "closed"
     }
   end
 

data/app/behaviors/ui/popover_trigger_behavior.rb

@@ -10,7 +10,7 @@ module UI::PopoverTriggerBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     {
       class: popover_trigger_classes,
-      data: { ui__popover_target: "trigger" }
+      data: {ui__popover_target: "trigger"}
     }.merge(attributes_value)
   end
 

data/app/behaviors/ui/progress_behavior.rb

@@ -1,48 +1,67 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Progress component
-    # Handles progress indicator styling and HTML attributes
-    module UI::ProgressBehavior
-      # Returns HTML attributes for the progress container element
-      def progress_html_attributes
-        {
-          class: progress_classes,
-          role: "progressbar",
-          "aria-valuemin": "0",
-          "aria-valuemax": "100",
-          "aria-valuenow": progress_value.to_i,
-          data: { slot: "progress" }
-        }
-      end
+# UI::ProgressBehavior
+#
+# @ui_component Progress
+# @ui_description Progress - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Progress - A progress indicator component for displaying task completion or loading status. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Meter
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/meter/
+# @ui_aria_attr aria-valuemin
+# @ui_aria_attr aria-valuemax
+# @ui_aria_attr aria-valuenow
+# @ui_aria_attr role="progressbar"
+#
+# @ui_related skeleton
+#
+module UI::ProgressBehavior
+  # Returns HTML attributes for the progress container element
+  def progress_html_attributes
+    {
+      class: progress_classes,
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-valuenow": progress_value.to_i,
+      data: {slot: "progress"}
+    }
+  end
 
-      # Returns combined CSS classes for the progress container
-      def progress_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          progress_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the progress container
+  def progress_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      progress_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns the validated progress value (between 0 and 100)
-      def progress_value
-        [[(@value || 0).to_f, 0].max, 100].min
-      end
+  # Returns the validated progress value (between 0 and 100)
+  def progress_value
+    (@value || 0).to_f.clamp(0, 100)
+  end
 
-      # Returns the indicator classes
-      def progress_indicator_classes
-        "bg-primary h-full w-full flex-1 transition-all"
-      end
+  # Returns the indicator classes
+  def progress_indicator_classes
+    "bg-primary h-full w-full flex-1 transition-all"
+  end
 
-      # Returns the transform style for the indicator
-      def progress_indicator_style
-        "transform: translateX(-#{100 - progress_value}%)"
-      end
+  # Returns the transform style for the indicator
+  def progress_indicator_style
+    "transform: translateX(-#{100 - progress_value}%)"
+  end
 
-      private
+  private
 
-      # Base classes applied to all progress containers
-      def progress_base_classes
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"
-      end
-    end
+  # Base classes applied to all progress containers
+  def progress_base_classes
+    "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full"
+  end
+end