fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/alert_dialog_trigger_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Trigger component
-    # Handles classes and Stimulus actions
-    module UI::AlertDialogTriggerBehavior
-      # Base CSS classes for alert dialog trigger wrapper
-      def alert_dialog_trigger_base_classes
-        "inline-flex"
-      end
+# Shared behavior for AlertDialog Trigger component
+# Handles classes and Stimulus actions
+module UI::AlertDialogTriggerBehavior
+  # Base CSS classes for alert dialog trigger wrapper
+  def alert_dialog_trigger_base_classes
+    "inline-flex"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_trigger_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_trigger_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_trigger_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_trigger_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus action
-      def alert_dialog_trigger_data_attributes
-        {
-          action: "click->ui--alert-dialog#open"
-        }
-      end
+  # Data attributes for Stimulus action
+  def alert_dialog_trigger_data_attributes
+    {
+      action: "click->ui--alert-dialog#open"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_alert_dialog_trigger_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(alert_dialog_trigger_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_alert_dialog_trigger_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(alert_dialog_trigger_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for alert dialog trigger
-      def alert_dialog_trigger_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: alert_dialog_trigger_classes,
-          data: merged_alert_dialog_trigger_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog trigger
+  def alert_dialog_trigger_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: alert_dialog_trigger_classes,
+      data: merged_alert_dialog_trigger_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/alert_title_behavior.rb

@@ -2,31 +2,31 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Alert Title component
-    # Handles title styling
-    module UI::AlertTitleBehavior
-      # Base CSS classes for alert title
-      def alert_title_base_classes
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
-      end
+# Shared behavior for Alert Title component
+# Handles title styling
+module UI::AlertTitleBehavior
+  # Base CSS classes for alert title
+  def alert_title_base_classes
+    "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight"
+  end
 
-      # Merge base classes with custom classes
-      def alert_title_classes
-        TailwindMerge::Merger.new.merge([alert_title_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def alert_title_classes
+    TailwindMerge::Merger.new.merge([alert_title_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert title
-      def alert_title_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_title_classes,
-          "data-slot": "alert-title"
-        )
-      end
+  # Build complete HTML attributes hash for alert title
+  def alert_title_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_title_classes,
+      "data-slot": "alert-title"
+    )
+  end
 
-      # Renders the alert title HTML (for ERB partials)
-      def render_alert_title(&content_block)
-        all_attributes = alert_title_html_attributes.deep_merge(@attributes || {})
-        content_tag(:div, **all_attributes, &content_block)
-      end
-    end
+  # Renders the alert title HTML (for ERB partials)
+  def render_alert_title(&content_block)
+    all_attributes = alert_title_html_attributes.deep_merge(@attributes || {})
+    content_tag(:div, **all_attributes, &content_block)
+  end
+end

data/app/behaviors/ui/aspect_ratio_behavior.rb

@@ -2,46 +2,54 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AspectRatio component
-    # Handles aspect ratio styling
-    module UI::AspectRatioBehavior
-      # Default aspect ratio is 1:1 (square)
-      DEFAULT_RATIO = 1.0
+# UI::AspectRatioBehavior
+#
+# @ui_component Aspect Ratio
+# @ui_description AspectRatio - Phlex implementation
+# @ui_category layout
+#
+# @ui_anatomy Aspect Ratio - Displays content within a desired aspect ratio. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::AspectRatioBehavior
+  # Default aspect ratio is 1:1 (square)
+  DEFAULT_RATIO = 1.0
 
-      # Calculate padding-bottom percentage for aspect ratio
-      # Formula: (height / width) * 100
-      def aspect_ratio_padding
-        ratio_value = @ratio || DEFAULT_RATIO
-        percentage = (1.0 / ratio_value) * 100
-        "#{percentage}%"
-      end
+  # Calculate padding-bottom percentage for aspect ratio
+  # Formula: (height / width) * 100
+  def aspect_ratio_padding
+    ratio_value = @ratio || DEFAULT_RATIO
+    percentage = (1.0 / ratio_value) * 100
+    "#{percentage}%"
+  end
 
-      # Merge base classes with custom classes
-      def aspect_ratio_classes
-        TailwindMerge::Merger.new.merge([@classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def aspect_ratio_classes
+    TailwindMerge::Merger.new.merge([@classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for aspect ratio container
-      def aspect_ratio_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: aspect_ratio_classes,
-          "data-slot": "aspect-ratio",
-          style: "position: relative; width: 100%;"
-        )
-      end
+  # Build complete HTML attributes hash for aspect ratio container
+  def aspect_ratio_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: aspect_ratio_classes,
+      "data-slot": "aspect-ratio",
+      style: "position: relative; width: 100%;"
+    )
+  end
 
-      # Build attributes for the padding element
-      def aspect_ratio_padding_attributes
-        {
-          style: "padding-bottom: #{aspect_ratio_padding};"
-        }
-      end
+  # Build attributes for the padding element
+  def aspect_ratio_padding_attributes
+    {
+      style: "padding-bottom: #{aspect_ratio_padding};"
+    }
+  end
 
-      # Build attributes for the content wrapper
-      def aspect_ratio_content_attributes
-        {
-          style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
-        }
-      end
-    end
+  # Build attributes for the content wrapper
+  def aspect_ratio_content_attributes
+    {
+      style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
+    }
+  end
+end

data/app/behaviors/ui/avatar_behavior.rb

@@ -1,43 +1,50 @@
 # frozen_string_literal: true
 
-    # AvatarBehavior
-    #
-    # Shared behavior for Avatar component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    #
-    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
-    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
-    module UI::AvatarBehavior
-      # Returns HTML attributes for the avatar element
-      def avatar_html_attributes
-        {
-          class: avatar_classes,
-          data: avatar_data_attributes
-        }
-      end
+# UI::AvatarBehavior
+#
+# @ui_component Avatar
+# @ui_description Avatar - Phlex implementation
+# @ui_category data-display
+#
+# @ui_anatomy Avatar - Displays an image element with a fallback for representing users. (required)
+# @ui_anatomy Fallback - Displays fallback content when the image hasn't loaded or fails to load.
+# @ui_anatomy Image - Displays the avatar image. Only renders when it has loaded successfully.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_related badge
+#
+module UI::AvatarBehavior
+  # Returns HTML attributes for the avatar element
+  def avatar_html_attributes
+    {
+      class: avatar_classes,
+      data: avatar_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the avatar
-      def avatar_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          avatar_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the avatar
+  def avatar_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      avatar_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus controller
-      def avatar_data_attributes
-        {
-          controller: "ui--avatar",
-          slot: "avatar"
-        }
-      end
+  # Returns data attributes for Stimulus controller
+  def avatar_data_attributes
+    {
+      controller: "ui--avatar",
+      slot: "avatar"
+    }
+  end
 
-      private
+  private
 
-      # Base classes applied to all avatars
-      # Matches shadcn/ui v4: "relative flex size-8 shrink-0 overflow-hidden rounded-full"
-      def avatar_base_classes
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full"
-      end
-    end
+  # Base classes applied to all avatars
+  # Matches shadcn/ui v4: "relative flex size-8 shrink-0 overflow-hidden rounded-full"
+  def avatar_base_classes
+    "relative flex size-8 shrink-0 overflow-hidden rounded-full"
+  end
+end

data/app/behaviors/ui/avatar_fallback_behavior.rb

@@ -1,43 +1,43 @@
 # frozen_string_literal: true
 
-    # AvatarFallbackBehavior
-    #
-    # Shared behavior for AvatarFallback component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation for avatar fallbacks.
-    #
-    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
-    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
-    module UI::AvatarFallbackBehavior
-      # Returns HTML attributes for the avatar fallback element
-      def avatar_fallback_html_attributes
-        {
-          class: avatar_fallback_classes,
-          data: avatar_fallback_data_attributes
-        }
-      end
+# AvatarFallbackBehavior
+#
+# Shared behavior for AvatarFallback component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation for avatar fallbacks.
+#
+# Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+# Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+module UI::AvatarFallbackBehavior
+  # Returns HTML attributes for the avatar fallback element
+  def avatar_fallback_html_attributes
+    {
+      class: avatar_fallback_classes,
+      data: avatar_fallback_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the avatar fallback
-      def avatar_fallback_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          avatar_fallback_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the avatar fallback
+  def avatar_fallback_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      avatar_fallback_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus target
-      def avatar_fallback_data_attributes
-        {
-          "ui--avatar_target": "fallback",
-          slot: "avatar-fallback"
-        }
-      end
+  # Returns data attributes for Stimulus target
+  def avatar_fallback_data_attributes
+    {
+      "ui--avatar_target": "fallback",
+      slot: "avatar-fallback"
+    }
+  end
 
-      private
+  private
 
-      # Base classes applied to all avatar fallbacks
-      # Matches shadcn/ui v4: "bg-muted flex size-full items-center justify-center rounded-full"
-      def avatar_fallback_base_classes
-        "bg-muted flex size-full items-center justify-center rounded-full"
-      end
-    end
+  # Base classes applied to all avatar fallbacks
+  # Matches shadcn/ui v4: "bg-muted flex size-full items-center justify-center rounded-full"
+  def avatar_fallback_base_classes
+    "bg-muted flex size-full items-center justify-center rounded-full"
+  end
+end

data/app/behaviors/ui/avatar_image_behavior.rb

@@ -1,46 +1,46 @@
 # frozen_string_literal: true
 
-    # AvatarImageBehavior
-    #
-    # Shared behavior for AvatarImage component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation for avatar images.
-    #
-    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
-    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
-    module UI::AvatarImageBehavior
-      # Returns HTML attributes for the avatar image element
-      def avatar_image_html_attributes
-        {
-          src: @src,
-          alt: @alt,
-          class: avatar_image_classes,
-          data: avatar_image_data_attributes
-        }
-      end
+# AvatarImageBehavior
+#
+# Shared behavior for AvatarImage component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation for avatar images.
+#
+# Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+# Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+module UI::AvatarImageBehavior
+  # Returns HTML attributes for the avatar image element
+  def avatar_image_html_attributes
+    {
+      src: @src,
+      alt: @alt,
+      class: avatar_image_classes,
+      data: avatar_image_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the avatar image
-      def avatar_image_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          avatar_image_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the avatar image
+  def avatar_image_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      avatar_image_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus target
-      def avatar_image_data_attributes
-        {
-          "ui--avatar_target": "image",
-          slot: "avatar-image"
-        }
-      end
+  # Returns data attributes for Stimulus target
+  def avatar_image_data_attributes
+    {
+      "ui--avatar_target": "image",
+      slot: "avatar-image"
+    }
+  end
 
-      private
+  private
 
-      # Base classes applied to all avatar images
-      # Matches shadcn/ui v4: "aspect-square size-full"
-      # Start hidden until image loads successfully
-      def avatar_image_base_classes
-        "aspect-square size-full hidden"
-      end
-    end
+  # Base classes applied to all avatar images
+  # Matches shadcn/ui v4: "aspect-square size-full"
+  # Start hidden until image loads successfully
+  def avatar_image_base_classes
+    "aspect-square size-full hidden"
+  end
+end

data/app/behaviors/ui/badge_behavior.rb

@@ -1,50 +1,57 @@
 # frozen_string_literal: true
 
-    # BadgeBehavior
-    #
-    # Shared behavior for Badge component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent variant styling and HTML attribute generation.
-    #
-    # Based on shadcn/ui Badge: https://ui.shadcn.com/docs/components/badge
-    module UI::BadgeBehavior
-      # Returns HTML attributes for the badge element
-      def badge_html_attributes
-        {
-          class: badge_classes,
-          data: { slot: "badge" }
-        }
-      end
+# UI::BadgeBehavior
+#
+# @ui_component Badge
+# @ui_description Badge - Phlex implementation
+# @ui_category data-display
+#
+# @ui_anatomy Badge - Displays a badge or a component that looks like a badge. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_related avatar
+#
+module UI::BadgeBehavior
+  # Returns HTML attributes for the badge element
+  def badge_html_attributes
+    {
+      class: badge_classes,
+      data: {slot: "badge"}
+    }
+  end
 
-      # Returns combined CSS classes for the badge
-      def badge_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          badge_base_classes,
-          badge_variant_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the badge
+  def badge_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      badge_base_classes,
+      badge_variant_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to all badges
-      # Matches shadcn/ui v4 exactly
-      def badge_base_classes
-        "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden"
-      end
+  # Base classes applied to all badges
+  # Matches shadcn/ui v4 exactly
+  def badge_base_classes
+    "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden"
+  end
 
-      # Variant-specific classes based on @variant
-      # Matches shadcn/ui v4 variants exactly
-      def badge_variant_classes
-        case @variant.to_s
-        when "secondary"
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90"
-        when "destructive"
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
-        when "outline"
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-        else # default
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90"
-        end
-      end
+  # Variant-specific classes based on @variant
+  # Matches shadcn/ui v4 variants exactly
+  def badge_variant_classes
+    case @variant.to_s
+    when "secondary"
+      "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90"
+    when "destructive"
+      "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+    when "outline"
+      "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+    else # default
+      "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90"
     end
+  end
+end

data/app/behaviors/ui/blockquote_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Blockquote component
-    module UI::BlockquoteBehavior
-      # Base CSS classes for Blockquote
-      def blockquote_base_classes
-        "mt-6 border-l-2 pl-6 italic"
-      end
+# UI::BlockquoteBehavior
+#
+# @ui_component Blockquote
+# @ui_category typography
+#
+# @ui_anatomy Blockquote - Blockquote component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::BlockquoteBehavior
+  # Base CSS classes for Blockquote
+  def blockquote_base_classes
+    "mt-6 border-l-2 pl-6 italic"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def blockquote_classes
-        TailwindMerge::Merger.new.merge([blockquote_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def blockquote_classes
+    TailwindMerge::Merger.new.merge([blockquote_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def blockquote_html_attributes
-        {
-          class: blockquote_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def blockquote_html_attributes
+    {
+      class: blockquote_classes
+    }
+  end
+end