fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/alert_dialog_overlay_behavior.rb

@@ -2,67 +2,67 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Overlay component
-    # Handles backdrop/overlay styling and attributes
-    module UI::AlertDialogOverlayBehavior
-      # Base CSS classes for overlay backdrop
-      # Use opacity-0 and pointer-events-none when closed for smooth animations
-      def alert_dialog_overlay_base_classes
-        "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]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed inset-0 z-50 bg-black/50"
-      end
+# Shared behavior for AlertDialog Overlay component
+# Handles backdrop/overlay styling and attributes
+module UI::AlertDialogOverlayBehavior
+  # Base CSS classes for overlay backdrop
+  # Use opacity-0 and pointer-events-none when closed for smooth animations
+  def alert_dialog_overlay_base_classes
+    "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]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed inset-0 z-50 bg-black/50"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_overlay_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_overlay_base_classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_overlay_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_overlay_base_classes].compact.join(" "))
+  end
 
-      # Container wrapper classes
-      # Use invisible (visibility: hidden) when closed, visible when open
-      def alert_dialog_overlay_container_base_classes
-        "data-[state=closed]:invisible data-[state=open]:visible fixed inset-0 z-50"
-      end
+  # Container wrapper classes
+  # Use invisible (visibility: hidden) when closed, visible when open
+  def alert_dialog_overlay_container_base_classes
+    "data-[state=closed]:invisible data-[state=open]:visible fixed inset-0 z-50"
+  end
 
-      # Merge container base classes with custom classes
-      def alert_dialog_overlay_container_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_overlay_container_base_classes, @classes].compact.join(" "))
-      end
+  # Merge container base classes with custom classes
+  def alert_dialog_overlay_container_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_overlay_container_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for container
-      def alert_dialog_overlay_container_data_attributes
-        {
-          ui__alert_dialog_target: "container"
-        }
-      end
+  # Data attributes for container
+  def alert_dialog_overlay_container_data_attributes
+    {
+      ui__alert_dialog_target: "container"
+    }
+  end
 
-      # Data attributes for overlay backdrop
-      def alert_dialog_overlay_data_attributes
-        {
-          ui__alert_dialog_target: "overlay",
-          action: "click->ui--alert-dialog#preventOverlayClose"
-        }
-      end
+  # Data attributes for overlay backdrop
+  def alert_dialog_overlay_data_attributes
+    {
+      ui__alert_dialog_target: "overlay",
+      action: "click->ui--alert-dialog#preventOverlayClose"
+    }
+  end
 
-      # Merge user-provided data attributes for container
-      def merged_alert_dialog_overlay_container_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(alert_dialog_overlay_container_data_attributes)
-      end
+  # Merge user-provided data attributes for container
+  def merged_alert_dialog_overlay_container_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(alert_dialog_overlay_container_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for container wrapper
-      def alert_dialog_overlay_container_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: alert_dialog_overlay_container_classes,
-          "data-state": @open ? "open" : "closed",
-          data: merged_alert_dialog_overlay_container_data_attributes
-        )
-      end
+  # Build complete HTML attributes hash for container wrapper
+  def alert_dialog_overlay_container_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: alert_dialog_overlay_container_classes,
+      "data-state": @open ? "open" : "closed",
+      data: merged_alert_dialog_overlay_container_data_attributes
+    )
+  end
 
-      # Build complete HTML attributes hash for overlay backdrop
-      def alert_dialog_overlay_html_attributes
-        {
-          class: alert_dialog_overlay_classes,
-          data: alert_dialog_overlay_data_attributes
-        }
-      end
-    end
+  # Build complete HTML attributes hash for overlay backdrop
+  def alert_dialog_overlay_html_attributes
+    {
+      class: alert_dialog_overlay_classes,
+      data: alert_dialog_overlay_data_attributes
+    }
+  end
+end

data/app/behaviors/ui/alert_dialog_title_behavior.rb

@@ -2,24 +2,24 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Title component
-    # Handles title styling
-    module UI::AlertDialogTitleBehavior
-      # Base CSS classes for alert dialog title
-      def alert_dialog_title_base_classes
-        "text-lg font-semibold"
-      end
+# Shared behavior for AlertDialog Title component
+# Handles title styling
+module UI::AlertDialogTitleBehavior
+  # Base CSS classes for alert dialog title
+  def alert_dialog_title_base_classes
+    "text-lg font-semibold"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_title_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_title_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_title_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_title_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert dialog title
-      def alert_dialog_title_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_dialog_title_classes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog title
+  def alert_dialog_title_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_dialog_title_classes
+    )
+  end
+end

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