fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/alert_behavior.rb

@@ -2,43 +2,60 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Alert component
-    # Handles alert container styling with variants
-    module UI::AlertBehavior
-      # Base CSS classes for alert container
-      # Uses grid layout that adapts when SVG icons are present
-      def alert_base_classes
-        "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
-      end
+# UI::AlertBehavior
+#
+# @ui_component Alert
+# @ui_description Alert - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Alert - A callout component for displaying important information to users. (required)
+# @ui_anatomy Description - Description text for an alert component.
+# @ui_anatomy Title - Title text for an alert component.
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_aria_pattern Alert
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+# @ui_aria_attr role="alert"
+#
+# @ui_related alert_dialog
+# @ui_related toast
+#
+module UI::AlertBehavior
+  # Base CSS classes for alert container
+  # Uses grid layout that adapts when SVG icons are present
+  def alert_base_classes
+    "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+  end
 
-      # Variant-specific classes
-      def alert_variant_classes
-        case @variant
-        when :destructive
-          "border-destructive text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
-        else # :default
-          "bg-card text-card-foreground"
-        end
-      end
+  # Variant-specific classes
+  def alert_variant_classes
+    case @variant
+    when :destructive
+      "border-destructive text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+    else # :default
+      "bg-card text-card-foreground"
+    end
+  end
 
-      # Merge base classes with variant and custom classes
-      def alert_classes
-        TailwindMerge::Merger.new.merge([alert_base_classes, alert_variant_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with variant and custom classes
+  def alert_classes
+    TailwindMerge::Merger.new.merge([alert_base_classes, alert_variant_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert container
-      def alert_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_classes,
-          role: "alert",
-          "data-slot": "alert"
-        )
-      end
+  # Build complete HTML attributes hash for alert container
+  def alert_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_classes,
+      role: "alert",
+      "data-slot": "alert"
+    )
+  end
 
-      # Renders the alert HTML (for ERB partials)
-      def render_alert(&content_block)
-        all_attributes = alert_html_attributes.deep_merge(@attributes || {})
-        content_tag(:div, **all_attributes, &content_block)
-      end
-    end
+  # Renders the alert HTML (for ERB partials)
+  def render_alert(&content_block)
+    all_attributes = alert_html_attributes.deep_merge(@attributes || {})
+    content_tag(:div, **all_attributes, &content_block)
+  end
+end

data/app/behaviors/ui/alert_description_behavior.rb

@@ -2,31 +2,31 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Alert Description component
-    # Handles description text styling
-    module UI::AlertDescriptionBehavior
-      # Base CSS classes for alert description
-      def alert_description_base_classes
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"
-      end
+# Shared behavior for Alert Description component
+# Handles description text styling
+module UI::AlertDescriptionBehavior
+  # Base CSS classes for alert description
+  def alert_description_base_classes
+    "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed"
+  end
 
-      # Merge base classes with custom classes
-      def alert_description_classes
-        TailwindMerge::Merger.new.merge([alert_description_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def alert_description_classes
+    TailwindMerge::Merger.new.merge([alert_description_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash for alert description
-      def alert_description_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: alert_description_classes,
-          "data-slot": "alert-description"
-        )
-      end
+  # Build complete HTML attributes hash for alert description
+  def alert_description_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: alert_description_classes,
+      "data-slot": "alert-description"
+    )
+  end
 
-      # Renders the alert description HTML (for ERB partials)
-      def render_alert_description(&content_block)
-        all_attributes = alert_description_html_attributes.deep_merge(@attributes || {})
-        content_tag(:div, **all_attributes, &content_block)
-      end
-    end
+  # Renders the alert description HTML (for ERB partials)
+  def render_alert_description(&content_block)
+    all_attributes = alert_description_html_attributes.deep_merge(@attributes || {})
+    content_tag(:div, **all_attributes, &content_block)
+  end
+end

data/app/behaviors/ui/alert_dialog_action_behavior.rb

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

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