fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/alert_dialog_behavior.rb

@@ -2,40 +2,65 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog component
-    # Handles classes and data attributes
-    module UI::AlertDialogBehavior
-      # Base CSS classes for alert dialog container
-      def alert_dialog_base_classes
-        ""
-      end
+# UI::AlertDialogBehavior
+#
+# @ui_component Alert Dialog
+# @ui_description AlertDialog - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Alert Dialog - A modal alert dialog component for important confirmations and alerts. (required)
+# @ui_anatomy Action - Primary action button for the alert dialog.
+# @ui_anatomy Cancel - Cancel button for the alert dialog.
+# @ui_anatomy Content - Main alert dialog content area with proper ARIA attributes. (required)
+# @ui_anatomy Description - Description text for the alert dialog.
+# @ui_anatomy Footer - Footer section with action buttons for the alert dialog.
+# @ui_anatomy Header - Header section of the alert dialog.
+# @ui_anatomy Overlay - Container wrapper with backdrop and content for the alert dialog overlay.
+# @ui_anatomy Title - Title text for the alert dialog.
+# @ui_anatomy Trigger - A wrapper that adds the alert dialog open action to its child element. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Focus management
+#
+# @ui_aria_pattern Alert Dialog
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+#
+# @ui_keyboard Escape Closes the component
+#
+# @ui_related dialog
+#
+module UI::AlertDialogBehavior
+  # Base CSS classes for alert dialog container
+  def alert_dialog_base_classes
+    ""
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus controller
-      def alert_dialog_data_attributes
-        {
-          controller: "ui--alert-dialog",
-          ui__alert_dialog_open_value: @open,
-          ui__alert_dialog_close_on_escape_value: @close_on_escape
-        }
-      end
+  # Data attributes for Stimulus controller
+  def alert_dialog_data_attributes
+    {
+      controller: "ui--alert-dialog",
+      ui__alert_dialog_open_value: @open,
+      ui__alert_dialog_close_on_escape_value: @close_on_escape
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_alert_dialog_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(alert_dialog_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_alert_dialog_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(alert_dialog_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for alert dialog container
-      def alert_dialog_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: alert_dialog_classes,
-          data: merged_alert_dialog_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog container
+  def alert_dialog_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: alert_dialog_classes,
+      data: merged_alert_dialog_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/alert_dialog_cancel_behavior.rb

@@ -2,26 +2,26 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Cancel component
-    # This wraps the Button component with alert dialog close action
-    module UI::AlertDialogCancelBehavior
-      # Data attributes for Stimulus action
-      def alert_dialog_cancel_data_attributes
-        {
-          action: "click->ui--alert-dialog#close"
-        }
-      end
+# Shared behavior for AlertDialog Cancel component
+# This wraps the Button component with alert dialog close action
+module UI::AlertDialogCancelBehavior
+  # Data attributes for Stimulus action
+  def alert_dialog_cancel_data_attributes
+    {
+      action: "click->ui--alert-dialog#close"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_alert_dialog_cancel_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(alert_dialog_cancel_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_alert_dialog_cancel_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(alert_dialog_cancel_data_attributes)
+  end
 
-      # Build data attributes hash to pass to Button component
-      def alert_dialog_cancel_button_data_attributes
-        {
-          data: merged_alert_dialog_cancel_data_attributes
-        }
-      end
-    end
+  # Build data attributes hash to pass to Button component
+  def alert_dialog_cancel_button_data_attributes
+    {
+      data: merged_alert_dialog_cancel_data_attributes
+    }
+  end
+end

data/app/behaviors/ui/alert_dialog_content_behavior.rb

@@ -2,41 +2,41 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Content component
-    # Handles content area styling, ARIA attributes, and animations
-    module UI::AlertDialogContentBehavior
-      # Base CSS classes for alert dialog content
-      # Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations
-      def alert_dialog_content_base_classes
-        "bg-background 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-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg"
-      end
+# Shared behavior for AlertDialog Content component
+# Handles content area styling, ARIA attributes, and animations
+module UI::AlertDialogContentBehavior
+  # Base CSS classes for alert dialog content
+  # Use opacity-0/scale-95 and pointer-events-none when closed for smooth animations
+  def alert_dialog_content_base_classes
+    "bg-background 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-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_content_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_content_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_content_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_content_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus target
-      def alert_dialog_content_data_attributes
-        {
-          ui__alert_dialog_target: "content"
-        }
-      end
+  # Data attributes for Stimulus target
+  def alert_dialog_content_data_attributes
+    {
+      ui__alert_dialog_target: "content"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_alert_dialog_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(alert_dialog_content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_alert_dialog_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(alert_dialog_content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for alert dialog content
-      def alert_dialog_content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: alert_dialog_content_classes,
-          role: "alertdialog",
-          "aria-modal": "true",
-          data: merged_alert_dialog_content_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog content
+  def alert_dialog_content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: alert_dialog_content_classes,
+      role: "alertdialog",
+      "aria-modal": "true",
+      data: merged_alert_dialog_content_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/alert_dialog_description_behavior.rb

@@ -2,24 +2,24 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Description component
-    # Handles description text styling
-    module UI::AlertDialogDescriptionBehavior
-      # Base CSS classes for alert dialog description
-      def alert_dialog_description_base_classes
-        "text-muted-foreground text-sm"
-      end
+# Shared behavior for AlertDialog Description component
+# Handles description text styling
+module UI::AlertDialogDescriptionBehavior
+  # Base CSS classes for alert dialog description
+  def alert_dialog_description_base_classes
+    "text-muted-foreground text-sm"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_description_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_description_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_description_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_description_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert dialog description
-      def alert_dialog_description_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_dialog_description_classes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog description
+  def alert_dialog_description_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_dialog_description_classes
+    )
+  end
+end

data/app/behaviors/ui/alert_dialog_footer_behavior.rb

@@ -2,25 +2,25 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Footer component
-    # Handles footer section styling with action buttons
-    module UI::AlertDialogFooterBehavior
-      # Base CSS classes for alert dialog footer
-      # Note: flex-col-reverse on mobile so cancel appears below action, then row on desktop with buttons at end
-      def alert_dialog_footer_base_classes
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
-      end
+# Shared behavior for AlertDialog Footer component
+# Handles footer section styling with action buttons
+module UI::AlertDialogFooterBehavior
+  # Base CSS classes for alert dialog footer
+  # Note: flex-col-reverse on mobile so cancel appears below action, then row on desktop with buttons at end
+  def alert_dialog_footer_base_classes
+    "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_footer_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_footer_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_footer_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_footer_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert dialog footer
-      def alert_dialog_footer_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_dialog_footer_classes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog footer
+  def alert_dialog_footer_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_dialog_footer_classes
+    )
+  end
+end

data/app/behaviors/ui/alert_dialog_header_behavior.rb

@@ -2,24 +2,24 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for AlertDialog Header component
-    # Handles header section styling
-    module UI::AlertDialogHeaderBehavior
-      # Base CSS classes for alert dialog header
-      def alert_dialog_header_base_classes
-        "flex flex-col gap-2 text-center sm:text-left"
-      end
+# Shared behavior for AlertDialog Header component
+# Handles header section styling
+module UI::AlertDialogHeaderBehavior
+  # Base CSS classes for alert dialog header
+  def alert_dialog_header_base_classes
+    "flex flex-col gap-2 text-center sm:text-left"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def alert_dialog_header_classes
-        TailwindMerge::Merger.new.merge([alert_dialog_header_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def alert_dialog_header_classes
+    TailwindMerge::Merger.new.merge([alert_dialog_header_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert dialog header
-      def alert_dialog_header_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_dialog_header_classes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for alert dialog header
+  def alert_dialog_header_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_dialog_header_classes
+    )
+  end
+end

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